Question

我在UITextView，

期间更改input的值时遇到问题

onChange

我仍然收到错误消息

未捕获的TypeError：无法读取属性＆＃39; setState＆＃39;未定义的

我尝试handleChange(event){ this.setState({ value: event.target.value }); } render(){ return( <div className={s.root}> <div className={s.container}> <label className={s.captionLabel}>{this.props.caption}</label> <input className={this.props.modal? s.modalTextInput : s.textInput} onChange={this.handleChange} value={this.state.value} ref="inp" disabled={!this.state.isChecked} type="text" /> <label className={s.unitLabel}>{this.props.unit}</label> <input className={s.boxInput} type="checkbox" checked={this.state.isChecked} onChange={this.toggleChange.bind(this)}/> </div> </div> ) }，之后我没有收到此错误消息，但我无法更改输入值。在onChange={this.handleChange.bind(this}的摘录中，我得到的价值就像1,01,02等......但是价值不再改变（我只是不能在输入中覆盖值）。那么任何提示我必须做什么？

Answer 1

只需在constructor方法

中绑定您的函数即可

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 0 }
    
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({
      value: event.target.value
    });
  }

  render(){
    return(
      <div>
        <div>
          <h1>Current value: {this.state.value}</h1>
          <label>{this.props.caption}</label>
          <input onChange={this.handleChange} value={this.state.value} ref="inp" type="text" />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Example name="World" />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Answer 2

我的代码看起来很像 -

class Input extends React.Component {
  constructor(props){
    super(props);
    this.state= {
      isChecked: true,
      value: '0'
    };
    this.handleChange= this.handleChange.bind(this);

  };

  shouldComponentUpdate(nextProps){
    return this.props.inputValue != nextProps.inputValue;
  }

  componentWillReceiveProps(nextProps){
    console.log('inputWillReciveProps',nextProps.inputValue);
    this.setState({
      value: nextProps.inputValue
    })
  }

  handleChange(event){
    console.log(event);/*
    this.setState({
      value: event.target.value
    });*/
  }

  render(){
    console.log('Inputrender',this.props.inputValue);
    return(
      <div className={s.root}>
        <div className={s.container}>
          <label className={s.captionLabel}>{this.props.caption}</label>
          <input className={this.props.modal? s.modalTextInput : s.textInput} onChange={this.handleChange} value={this.state.value} ref="inp" disabled={!this.state.isChecked} type="text" />
          <label className={s.unitLabel}>{this.props.unit}</label>
          <input className={s.boxInput} type="checkbox" checked={this.state.isChecked} onChange={this.toggleChange.bind(this)}/>
        </div>
      </div>
    )
  }

  toggleChange(){
    this.setState({
      isChecked: !this.state.isChecked
    })
  }
}

反应变化输入值会导致错误

2 个答案: