反应动态形式与反应状态

Question

所以我需要创建一个与动态字段反应的表单，这些字段是数组中的元素，所以我必须从 Form 创建一个对象（这是一个使用 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,
}

问题出在输入的值属性上，我也无法使其动态化。

提前致谢！

Answer 1

问题是在为 <input/> 设置 value 时如何访问 object 状态。

通过执行 object.property，您要求 javascript 提供与对象上的 property 键关联的值。如果您的状态对象的形式为 return，那将是一个值：

{
  property: 'some-value'
}

在这种情况下，您的状态中没有名为 property 的键，这不是预期的行为。

要使用变量 property 动态访问 object，您可以这样做：object[property].

因此您的输入看起来像

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

我可能还建议您可以提供一个更具描述性的名称，例如 formValueState 或类似的名称。

祝你好运！

反应动态形式与反应状态

React Dynamic Form with React State

reactjs

react-hooks

use-state