Question

我试图在用户输入后状态发生变化时找到一种更改React类型的方式来更改输入字段。这是我当前的设置，但我正在寻找一种方法来做到这一点，而不用componentWillReceiveProps方法向DOM发送信号：

export default class Example extends React.Component {

constructor(props){
  super(props);
  this.state = {title: props.arr.question};
};

componentWillReceiveProps(nextProps){
  if(nextProps.arr.question !== this.state.title){
    let id = "question" + this.props.arr.key;
    document.getElementById(id).value = nextProps.arr.question;
    this.setState({title: nextProps.arr.question});
  }
}
  render(){

  return(<div>
<input type="text" id={"question" + this.props.arr.key} defaultValue={this.state.title} placeholder="Enter your title."/>
          </div>
        )
  }
}

我假设当状态发生变化时，我也会看到输入变化。实际上，出于某种原因，除输入字段之外的任何元素都会发生这种情况。因此，我发现有效的唯一方法是在componentWillReceiveProps方法中引用DOM并将其更改为。

有没有更好的方法来做到这一点，我不知道？

Answer 1

您可以通过使用state中的值直接设置输入中的值来创建受控制的组件。查看my answer here，申请类似。

所以在你的代码中修改为：

export default class Example extends React.Component {

constructor(props){
  super(props);
  this.state = {title: props.arr.question};
  this.handleTitleChange = this.handleTitleChange.bind(this); 
  // ^--necessary to be able to call setState
};

handleTitleChange(e){
  this.setState({title: event.target.value});
  // this updates the state as the user types into the input
  // which also causes a re-render of this component
  // with the newly update state
}
render(){

  return(
     <div>
      <input type="text" 
        id={"question" + this.props.arr.key}
        defaultValue={this.state.title} 
        placeholder="Enter your title."
        onChange={this.handleTitleChange}  // to handle the change

        value={this.state.title}/>  // here is where you set 
                                    // the value to current state
     </div>
  )
}

在用户输入后状态发生变化时更改输入字段

1 个答案: