Javascript 输入字段中的值不能存储为React状态
我试图从输入字段中获取用户输入值,并在相应的状态下更新。但我在字段中键入的内容没有设置为状态Javascript 输入字段中的值不能存储为React状态,javascript,reactjs,Javascript,Reactjs,我试图从输入字段中获取用户输入值,并在相应的状态下更新。但我在字段中键入的内容没有设置为状态 creatForm(x){ var dx = 'd'+x let day = 'DAY'+x return this.state[dx].map((el,i)=> <div key={i}> <Form> <Form.Group inline>
creatForm(x){
var dx = 'd'+x
let day = 'DAY'+x
return this.state[dx].map((el,i)=>
<div key={i}>
<Form>
<Form.Group inline>
<Form.Field>
<label><h4>{day}</h4></label>
<Input name='startTime' value={el.startTime ||''} onChange={this.handleChange.bind(this,i,dx)}/>
</Form.Field>
<Form.Field>
<Input name='endTime' value={el.endTime ||''} onChange={this.handleChange.bind(this,i,dx)}/>
</Form.Field>
<Form.Field>
<Input name='location' value={el.location ||''} onChange={this.handleChange.bind(this,i,dx)}/>
<Button icon='plus' inverted color='blue' onClick={this.addClick}/>
{this.showMinus(i)}
</Form.Field>
</Form.Group>
</Form>
</div>
)
}
myhandleChange函数有任何错误吗?行
this.setState({d})
将更改不存在状态的属性d
。您可以在
d
之后添加dx
,并使用计算属性名称
handleChange(i,dx, e) {
const { name, value } = e.target;
let d = [...this.state[dx]];
d[i] = {...d[i], [name]: value};
console.log(d[i])
this.setState({ [dx]:d });
}
行
this.setState({d})
将更改不存在状态的属性d
。您可以在
d
之后添加dx
,并使用计算属性名称
handleChange(i,dx, e) {
const { name, value } = e.target;
let d = [...this.state[dx]];
d[i] = {...d[i], [name]: value};
console.log(d[i])
this.setState({ [dx]:d });
}
日志
console.log(d[i])
是否按预期工作?。请告诉我这是i
和dx
如果我键入“hello”,控制台.log(d[i])将显示类似{startTime:“h”,endTime:,“location:”}
,并通过{startTime:“e”,endTime:“location:”}
等方式覆盖日志控制台.log(d[i])
是否按预期工作?。如果我键入“hello”,请告诉我这是i
和dx
,如果我使用this.setState({[d+dx]:d}),则控制台.log(d[i])
将显示为{startTime:,endTime:,location:}
,并通过{startTime:,endTime:,location:}
覆盖,等等,如果我使用this.setState({[d+dx]:d})
它面临同样的问题。在我更改为this.setState({[dx]:d})之后代码>然后它工作properly@WenhaoHong很抱歉,我不知道您的数据的上下文。我给出了基本的想法。很高兴知道它起作用了,我还使用this.setState({[d+dx]:d})编辑了postIf I
它面临同样的问题。在我更改为this.setState({[dx]:d})之后代码>然后它工作properly@WenhaoHong很抱歉,我不知道您的数据的上下文。我给出了基本的想法。很高兴知道它起作用了,我还编辑了这篇文章
handleChange(i,dx, e) {
const { name, value } = e.target;
let d = [...this.state[dx]];
d[i] = {...d[i], [name]: value};
console.log(d[i])
this.setState({ [dx]:d });
}