コンポーネントの入力値を他のコンポーネントでレンダリングして返す方法

Question

私は2つのコンポーネント、InputValuesとAddProjectを持っています。 AddProjectにフォームタグを使用し、の内部にAddProjectのコンポーネントを使用しています。送信ボタンをクリックすると、handleSubmit()関数のテキストボックスの値を取得したいと思います。どうやってやるの？

export class InputValues extends Component { 
    updateText() { 
    this.setState(
     { 
     title: this.refs.title.value 
     }, 
     function() { 
     console.log(this.state); 
     } 
    ); 
    } 
    render() { 
    return (
     <div> 
     <input type="text" ref="title" onChange={this.updateText.bind(this)} /> 
     </div> 
    ); 
    } 
} 

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

    handleSubmit(e) { 
    this.setState(
     { 
     title: this.refs.title.value 
     }, 
     function() { 
     console.log(this.state); 
     } 
    ); 
    e.preventDefault(); 
    } 
    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit.bind(this)}> 
      <InputValues /> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ); 
    } 
} 

Answer 1

私はどうしたらまず最初に、「純粋な機能性成分」にごInputValuesを変更です。親コンポーネントの状態（タイトル）を既に管理しているので、これは少し洗練されています。親がその変更を処理できるようにするために、プレースホルダをそこに配置します。この値は小道具からも設定されていることに注意してください。これは、親が入力のあらゆる側面を制御することを意味します。本当に単なるダムのUI要素です。

function InputValues(props) { 
    return (
    <div> 
     <input type="text" value={props.value} onChange={props.onInputChange} /> 
    </div> 
); 
} 

親コンポーネントでハンドラを作成し、onsubmitの状態にアクセスします。注目すべきことは、をhandleInputChangeにバインドして、this.setStateにアクセスできるようにすることです。新しい値はe.target.valueで取得できます。これは、docsが通過するのとほぼ同じ正確なものです。送信ハンドラ内のthis.state.titleにアクセスして、確認したい項目を確認することができます。

class AddProject extends Component { 
    constructor() { 
    super(); 
    this.state = { title: '' }; 
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleInputChange(e) { 
    this.setState(
     { 
     title: e.target.value 
     }, 
     function() { 
     console.log(this.state); 
     } 
    ); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    // validate and do whatever is appropriate here 
    if (this.state.title === "Expected Title") { 
     return true; 
    } 

    return false; 
    } 
    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <InputValues value={this.state.title} onInputChange={this.handleInputChange}/> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ); 
    } 
}