ReactJS onChange function

Question

我的onChange函数哪里出了问题？我希望能够在文本框中键入内容，但是在重新编译时不断收到以下控制台错误：

**Uncaught TypeError: Cannot read property 'value' of undefined**

请参阅下面的代码：

var name = "";
export default React.createClass({
  handleChange: function() {
    this.props.onUserInput(
        this.refs.name.value    
    )
  },
  render() {
    return (
      <div>
        <div>{this.props.children}</div>
        <Well style={style.well}>
          <div style={style.userContent}>
            <input style={style.userDetails} 
                   id ="userName" 
                   type="text" 
                   onChange={this.handleChange()} 
                   value ={name} />
              <Button bsStyle="primary">Update</Button>
          </div>
        </Well>         
      </div>
    );
  }
});

Answer 1

删除().，onChange你必须传递对函数的引用

onChange={ this.handleChange } 

更新：

另外，在这种情况下，您不需要refs，因为您可以获得这样的值

handleChange: function (event) {
  this.props.onUserInput(
    event.currentTarget.value    
  )
},

根据你的例子，我看到你使用变量name，这是不好的做法，我认为在这种情况下你可以使用state，就像我的例子一样

const App = React.createClass({
  getInitialState: function () {
    return {
      value: ''
    }
  },
  
  handleChange: function (event) {
    this.setState({
      value: event.currentTarget.value
    }, () => { // arrow function, ES2015
      console.log(this.state.value);
      // call this.props.onUserInput(this.state.value)
    });
  },
  render() {
    return (
      <input style={ {} } 
        id="userName" 
        type="text" 
        onChange={ this.handleChange } 
        value={ this.state.value } 
      />
    );
  }
});
ReactDOM.render(<App />, document.getElementById('root'))

<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="root"></div>

Answer 2

嗯，有两件事正在发生。

首先，this.refs.name是undefined，并且您无法读取undefined的属性value（如错误所述）。您从未在render()方法中创建ref。阅读 ref 属性上的 React 文档，以更好地了解它的工作原理以及固有的局限性。

其次，您正在调用 handleChange 函数，而不仅仅是将其作为onChange传递：

onChange={this.handleChange()} // you CALL the function with ()

相反，直接传递它：

onChange={this.handleChange}

请注意，如果切换到 ES6 class 组件，则还需要绑定函数（否则handleChange运行时将undefined this）：

onChange={this.handleChange.bind(this)}

目前，React.createClass正在为您进行绑定。