Question

我跟着this answer将道具从子组件传递到父组件，它工作正常。

当我提交表单时，我的子组件中的响应状态正常但问题是，我必须提交表单2次才能在我的父组件中获取道具searchString。

如果我在我的子组件中的这一行上执行console.log

this.props.getSearchString(this.getSearch());

我提交

时未定义

你知道问题出在哪里吗？

我的父组件

class Parents extends Component {
 constructor() {
    super();
    this.state = { searchString :'' };
 }

 setSearchString(string) {
  this.setState({ searchString: string });
 }

 render() {
   return (
      <div>
         <p>Get Search String: {this.state.searchString}</p>
         <Child getSearchString={ mySearch => this.setSearchString(mySearch)} />
      </div>
   )
 }

}

我的子组件

class Child extends Component {

  constructor(props) {
     super(props);
     this.state = {value: '', response: ''};
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
  }

  getSearch() {
     return this.state.response;
  }

  handleChange(event) {
     this.setState({value: event.target.value});
  }

  handleSubmit(event) {
     event.preventDefault();
     this.setState({response: this.state.value});
     this.props.getSearchString(this.getSearch());
  }

  render() {
     return (
       <div>
       <p>Response: {this.state.response}</p>
       <form className="searchForm" onSubmit={this.handleSubmit}>
          <input type="text"
                 className="searchInput"
                 value={this.state.value}
                 onChange={this.handleChange} />
          <button className="searchButton" type="submit">Ok</button>
       </form>
       </div>
  )}

}

Answer 1

不要为子组件提供参数。

<Child getSearchString={ () => this.setSearchString()} />

将孩子的道具传递给父母未定义

1 个答案: