javascript - react 控制组件未正确接收输入

Question

我无法找出受控组件。几乎完全按照文档中的示例执行所有操作:https://facebook.github.io/react/docs/forms.html#controlled-components .

发生的情况是只有一个输入字符进入输入。下一个字符输入时，前一个字符将被替换。当我输入“asdf”时，我得到:

changeName a
changeName s
changeName d
changeName f

这是我的代码:

export class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.handleChangeName = this.handleChangeName.bind(this)
    this.handleChangeDescription = this.handleChangeDescription.bind(this)
    this.state = ({name:'',description:''})
  }

  shouldComponentUpdate (nextProps, nextState) {
    return false
  }

  handleChangeName(event) {
    console.log('changeName',event.target.value)
    this.setState({name: event.target.value.substr(0, 8)});
  }

  handleChangeDescription(event) {
    this.setState({description: event.target.value.substr(0, 140)});
  }

  render () {
    return (
    <Row>
      <Col xs={12} lg={12} className="beacon-fields">
        <Input id="name" help="Name" className="form-control" type="text" value={this.state.name} onChange={this.handleChangeName} />
        <Input id="description" help="Description" className="form-control" type="text" value={this.state.description} onChange={this.handleChangeDescription} />
      </Col>
    </Row>
  )
}

我做错了什么？

Answer 1

这个问题相当明显。 shouldComponentUpdate 方法阻止渲染执行，这意味着输入没有出现在输入字段中。解决方案相当简单:

shouldComponentUpdate (nextProps, nextState) {
  if (this.state !== nextState) {
    return true
  }    
  return false
}