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>
    );
  }
}

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

3 个答案: