包装输入时未正确设置 React 道具

Question

我正在尝试创建一个 React 组件，它包装一个输入并将更改后的输入的值传递给它的父级。 我可以通过仅委托 onchange 函数 trought props 将事件传递给父级，但我更愿意封装从子组件中的事件中提取的新值。

这是我的组件代码：

class BigInputField extends React.Component<IBigInputField, {}>{
  handleChange(event){
    console.log("handleChange method called !");
    debugger;
    let value = event && event.target && event.target.value;
    this.props.onChangeSetValue(value);
  };
  render(){
    return (
        <input type="search" value = {this.props.value} onChange= {this.handleChange} id="main_search_field" className="form-control" placeholder="Stuff to input"/>
    );
  }
}

问题是当我在输入中输入一些东西时，反应抱怨 this.props.onChangeSetValue(value) 不是一个函数。 当我在调试器语句中检查 this.props 时，我得到一个值为“form-control”的 className 成员，一个值为“Stuff to input”的占位符，一个值为“main_search_field”的 id ...。 似乎我没有得到父级传输的道具，而是得到了我的组件渲染的子级道具！ 这可能是 chrome 调试器的问题，它没有正确设置 this 值，但它没有解释为什么我的 this.props.onChangeSetValue 似乎不存在。

在父级中，prop 是这样设置的：

<BigInputField onChangeSetValue= {this.setSearchValue} value= this.state.search}/>

我已经在父级的渲染函数中检查了“this.setSearchValue”是正确的函数。

你怎么解释这个？

谢谢。

Answer 1

根据文档，在使用 ES6 类时，不会像 React.createClass 那样自动绑定在 render 中传递的方法，我必须在 render 方法中像这样绑定它们：

render(){
    return (
        <input type="search" value = {this.props.value} onChange= {this.handleChange.bind(this)} id="main_search_field" className="form-control" placeholder="Stuff to input"/>
    );
  }

注意this.handlechange之后的绑定

Answer 2

您是否将this 绑定到您的组件？在 React 组件中使用 es6 extends 时，你应该这样做：

class BigInputField extends React.Component<IBigInputField, {}>{
    constructor(props) {
        super(props);
        //need to bind custom functions to the component due to how extends works in es6
        this.handleChange = this.handleChange.bind(this);
    }
    ...
    render () { // return here }
}