React Dynamic Form с React State

Итак, мне нужно создать форму в реакции с полями динамики, эти поля являются элементами в массиве, поэтому мне нужно создать объект (который является состоянием, использующим хук useState) из формы, и поля должны быть свойствами этого объект, мой код:

const [object, setObject] = useState({})

const onChange = e => {
        setObject({...object,[e.target.name]:e.target.value})
    }

const properties = ["to","placeFrom","placeTo","from","date"]

  {properties.length !== 0 && 
        
        <form>

            {properties.map(property => 

<input type="text" class="form-control" name={property} value={object.property} onChange={onChange}/>

                )}

        </form> 
    }

Состояние объекта должно быть таким:

{
to: value,
placeFrom: value,
placeTo: value,
from: value,
date: value,
}

проблема в атрибуте value на входе, я тоже не мог сделать его динамическим.

Заранее спасибо!


reactjs react-hooks use-state
person Oelmounkad    schedule 15.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, как вы получаете доступ к состоянию object при установке value для <input/>.

Выполняя object.property, вы запрашиваете у javascript значение, связанное с ключом property объекта. Это вернет значение, если ваш объект состояния имеет форму:

{
  property: 'some-value'
}

В этом случае в вашем состоянии нет ключа с именем property, и это не предполагаемое поведение.

Чтобы получить доступ к object динамически с помощью переменной property, вы можете сделать это: object[property].

Таким образом, ваш ввод будет выглядеть как

<input type="text" class="form-control" name={property} value={object[property]} onChange={onChange}/>

Я мог бы также предложить, чтобы вместо того, чтобы называть свое состояние object, вы могли бы указать более описательное имя, например formValueState или что-то в этом роде.

Удачи!

person Rohan Varma    schedule 15.01.2021
comment
Спасибо ! это было именно то, что мне было нужно, я не знал, что вы можете сделать это в свойстве value ввода, Большое спасибо! - person Oelmounkad; 15.01.2021