React-更改输入值导致错误答案

【问题标题】：React- change input value causes errorReact-更改输入值导致错误
【发布时间】：2016-07-27 05:31:54
【问题描述】：

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

我仍然收到错误消息

未捕获的类型错误：无法读取未定义的属性“setState”

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

【问题讨论】：

你的构造函数看起来如何？它应该调用 super，绑定你更改处理程序并将 this.state 设置为某个初始值。
如果您对组件使用es6 class 方法，则必须手动bind this。关于输入值，如果您在渲染时控制台记录this.state.value 并在输入中输入一些内容，将记录什么值？
@Tushar Khatiwada 当我手动绑定它时，我无法覆盖输入。所以我的渲染不运行。我的输入中有默认的零值，我无法删除或覆盖它们。 @Scarysize 在构造函数中我有super(props)、value: '0' 和this.handleChange=this.handleChange.bind(this)
@LukášUnzeitig 试试这个：在你的handleChange(event) 评论this.setState 并写console.log(event)。输入任何内容，然后查看调试器控制台中的日志。
@TusharKhatiwada 这是一条长消息：D - Object { dispatchConfig: Object, _targetInst: Object, nativeEvent: input, type: "change", target: <input.Inputs_modalTextInput_2d6>, currentTarget: <input.Inputs_modalTextInput_2d6>, eventPhase: 3, bubbles: true, cancelable: false, timeStamp: 1469599236447, 6 and next… } 我到底在寻找什么？

标签： reactjs input onchange

【解决方案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" />

【讨论】：

已经有了，虽然没有报错，但是现在已经不可能变值了
拥有它！ :D 我的函数 shouldComponentUpdate 阻止了这个重新渲染...但是非常感谢。

【解决方案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
    })
  }
}

【讨论】：

shouldComponentUpdate 看起来不太好。删除此功能