子供から親に反応小道具を返す

Question

私はthis answerに続き、子コンポーネントから親コンポーネントへ小道具を渡しても問題ありません。

私がフォームを送信すると、私は私の子コンポーネント に応答状態の罰金を取得しかし、問題は、私は私の親コンポーネントでsearchStringの小道具を取得するために、フォームを2回提出しなければならない、です。

私は私の子コンポーネント

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

にこの行にはconsole.logをすれば、私は

問題はどこから来たあなたは知っていますかを提出したときに、私は未定義を取得？

私の親コンポーネント

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()} />