React-更改输入值导致错误

Question

我在 onChange、

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

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

我仍然收到错误消息

Uncaught TypeError: Cannot read property 'setState' of undefined

我尝试了 onChange={this.handleChange.bind(this} ，此后我没有收到此错误消息，但我无法更改输入值。在 event.target.value 的摘录中，我得到的值像 1,01,02 等等....但值不再改变（我只是不能覆盖 input 中的值）。那么我有什么提示吗？

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

React-更改输入值导致错误

React- change input value causes error

input

onchange

reactjs