用反应状态反应动态表单

Question

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

提前致谢！

Answer 1

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

通过执行object.property，您要求javascript 提供与对象上的property 键关联的值。如果您的状态对象具有以下形式，那将返回一个值：

{
  property: 'some-value'
}

在这种情况下，您所在的州没有名为 property 的密钥，这不是预期的行为。

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

因此您的输入看起来像

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

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

祝你好运！