使用 react 状态更新输入，反之亦然

Question

我正在使用输入字段，最初我使用状态更新它。

<input type="text" value={this.state.opp.description} />

但是当我运行这个时。输入根本不会更改值。

我的动机是首先使用状态更新输入，然后使用输入值更新状态。

我尝试使用 onChange，但这也不起作用。

<input type="text" value={this.state.opp.description} onChange={this.handleChange} />
var handleChange=(e)=>{
this.setState({opp:{description:e.target.value}});
}

请建议我应该怎么做。

Answer 1

除非对于输入上的每次更改，将状态设置为输入上的最新值，否则状态不会更改。

<input type="text" value={this.state.opp.description} onChange={this.onInputChange} />
---------------------------------------------------------
onInputChange = e => {
this.setState({
opp: {
description: e.target.value
}
});
}

编辑

工作示例 -> https://codesandbox.io/embed/vnjmyzp535

Answer 2

将onChange处理程序添加到输入中，然后可以在输入更改时更新状态。

handleChange = (e) => {
this.setState({opp: { description: e.target.value } })
}
<input type="text" onChange={this.handleChange} value={this.state.opp.description} />

Answer 3

这对你有用吗？

export default class TextInput extends React.Component {
state = {
opp: {
description: ''
}
};
onChange = e => {
this.setState({
opp: { description: e.target.value }
});
};
render() {
return (
<div>
<input
type="text"
onChange={this.onChange}
value={this.state.opp.description}
/>
state: {this.state.opp.description}
</div>
);
}
}