Question

我有一个父组件和子组件，只需输入并点击我想要更新父组件。我的onChange函数工作，但onClick我收到错误消息：无法读取undefined的属性'name' - 这意味着我从未真正更新过父。我无法弄清楚我做错了什么，因为据我所知，我正在正确地传递函数。有谁知道？谢谢！

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'Frarthur'};
    this.changeName = this.changeName.bind(this);
 }

changeName(newName) {
    this.setState({
        name: newName
    });
}
handleInput() {
    console.log("helloooooo", this.state.name)
}

render() {
    return (
        <div>               
            <Child name={this.state.name} onChange={this.changeName} onClick={this.handleInput}/>
        </div>
    )
}

}

class Child extends React.Component {

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleInput2 = this.handleInput2.bind(this);
}

handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
}

handleInput2() {
    this.props.onClick()
}

render() {
    return (
        <div>
            <h1>
                Hey my name is {this.props.name}!
            </h1>
            <input onChange={this.handleChange}/>
            <input type="submit" onClick={this.handleInput2}/>
        </div>
    )
}

}

Answer 1

你还没有绑定

handleInput()

父组件中的

方法。这是更正的父组件

class Parent extends React.Component {  
constructor(props) {
 super(props);
 this.state = { name: 'Frarthur' };
 this.changeName = this.changeName.bind(this);
 this.handleInput = this.handleInput.bind(this);
} 

changeName(newName) {
 this.setState({
  name: newName
 });
}
handleInput() {
 console.log("helloooooo", this.state.name)
}

render() {
 return (
  <div>
    <Child name={this.state.name} onChange={this.changeName} onClick={this.handleInput} />
  </div>
)
}};

Answer 2

您可以在构造函数中绑定它们，就像您使用changeName：

一样

constructor(props) {
  super(props);
  this.state = {name: 'Frarthur'};
  this.changeName = this.changeName.bind(this);
  this.handleInput = this.handleInput.bind(this);
}

或者，您可以使用胖箭头功能应用建议的ES7功能（仍被视为“实验性”，但极可能支持）p roperty initializer：

handleInput = () => {
    console.log("helloooooo", this.state.name)
};

注意，这可能需要您更新项目的配置以支持babel的第0阶段预设。

React - 如何更新父组件中的状态onclick in child - 我做错了什么？

2 个答案: