小道具として渡された関数からsetStateを呼び出す

Question

大きなコンポーネントをモジュール化して、その一部を再利用できるようにしたいと思います。

私は操作を行うことができるリストをレンダリングします：私のモーダル状態を更新して閉じるようにしてから、サーバコールでreduxアクションを起動します。

だから私は、カスタム動作を定義する関数を渡すしたいと思います：

var handleSubmit = (name, description, author) => { 

    if (inputsValidated(name, description)) { 
     this.setState({ addingNewProject: false, errorMessage: '' }); 

     var payload = { name: name, date: new Date(), description: description, author: author}, 
      routeToPushAfter = `/app/users/${author._id || 'notsigned'}`, 
      serverRoute = allRoutes.projectURL, 
      type = 'project' 

      this.props.postData(payload, routeToPushAfter, serverRoute, type); 
    } 

    else { 
     this.setState({ errorMessage: 'Please fill out form' }); 
    } 
} 

は、その後のコンポーネントにこの関数を渡します。

render() { 
    return (
     <div style={main}> 
      <DynamicList {...this.props} /> 
      <DynamicList {...this.props} handleSubmit={handleSubmit} handleDelete={handleDelete} /> 
     </div> 
    ); 
} 

問題は、this.setStateが親コンポーネントにバインドされていることです。どのようにして（Reduxを使わずに）ローカル状態を変更できる関数を渡すことができますか？

ありがとうございました！

Answer 1

あなたはDynamicListのコンストラクタ内部のコンポーネントに機能を結合することができる：

constructor(props) { 
    super(props); 
    if (this.props.handleSubmit) { 
    this.handleSubmit = this.props.handleSubmit.bind(this); 
    } 
}