我正在学习Mobx,并且正在尝试构建一个显示数组中某些字段的表单应用程序,您应该可以对其进行编辑。
我有一个数组@observable myArray
,如何编辑该数组的某个字段?
我尝试制作函数:
@action setMyArray(id, value) => {
myArray.map(field => {
if (field.id === id) {
field.text = value
}
}
}
当我将其用作文本字段的回调方法时,它只会向该字段的当前值添加1个字母,而不会在文本字段中重新呈现。
答案 0 :(得分:0)
首先,您不必将数据存储在数组中 如果要将所有表单字段存储在一个可观察的字段中,则应使用诸如object或Map之类的对象,例如:
class SomeStore {
@observable formData = new Map();
@action
setValue = (name, value) => {
this.formData.set(name, value)
}
}
然后您可以将此类代码用于react组件
const onChange = (event) => {
SomeStore.setValue(event.target.name, event.target.value);
}
return (
...
<input name="firstName" onChange={onChange} value={SomeStore.formData.get('firstName')} />
<input name="lastName" onChange={onChange} value={SomeStore.formData.get('lastName')} />
...
)