オブジェクトを作成してそれを親コンポーネントに渡すのがベストプラクティスですか？

Question

オブジェクトを作成してそれを親コンポーネントに渡すのがベストプラクティスですか？下のコードはうまくいきますが、2つのフィールドを持つ単純なフォームを送信するために、ここにたくさんのものを入れなければならないようです。私は、コンストラクタを作成してい

、

リスニングイベント、

結合事象、

App.js

に更新し、通過状態

は、これがベストプラクティス？：

はです。

class AddFishForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     title: '', 
     amount: '' 
    }; 
    this.onTitleChange = this.onTitleChange.bind(this); 
    this.onAmountChange = this.onAmountChange.bind(this); 
    } 
    onTitleChange = (e) => { 
    const title = e.target.value; 
    this.setState(() => ({ title })); 
    }; 
    onAmountChange = (e) => { 
    const amount = e.target.value; 
    this.setState(() => ({ amount })); 
    }; 

    createFish(event) { 
    event.preventDefault(); 
    this.props.addFish({ 
     url: this.state.url, 
     title: this.state.title 
    }); 
    } 
    render() { 
    return (
     <Segment> 
     <Form onSubmit={(e) => this.createFish(e)}> 
      <Form.Group > 
      <Form.Input 
       type='text' 
       placeholder='picture url' 
       autoFocus 
       value={this.state.title} 
       onChange={this.onTitleChange} 
       width={6} 
      /> 
      <Form.Input 
       type='text' 
       placeholder='title' 
       autoFocus 
       value={this.state.amount} 
       onChange={this.onAmountChange} 
       width={6} 
      /> 
      </Form.Group > 
      <Button fluid type='submit'>Submit</Button> 
     </Form> 
     </Segment> 
    ) 
    } 
} 

Answer 1

コードを簡略化するには、より一般的な状態を更新するCメソッド：

onInputChange = (e) => { 
    const target = e.target; 
    const name = target.name; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    // add code for other input types 
    this.setState(() => ({ [name]: value })); 
}; 

バインドこの方法あなたのコンストラクタで

this.onInputChange = this.onInputChange.bind(this); 

とname属性が正しい状態への入力を接続するあなたの要素

<input 
    type='text' 
    name='title' 
    value={this.state.title} 
    onChange={this.onInputChange} 
    ... 
/> 

<input 
    type='checkbox' 
    name='is_subsribed' 
    checked={this.state.is_subsribed} 
    onChange={this.onInputChange} 
    ... 
/> 

にそれを使用します値

Answer 2

inputの追加操作は不要ですe uncontrolled components。これはコードの非制御コンポーネントバージョンです

class AddFishForm extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    createFish(event) { 
    event.preventDefault(); 
    const url = this._url.value; 
    const title = this._title.value; 
    this.props.addFish({ url, title }); 
    } 
    render() { 
    return (
     <Segment> 
     <Form onSubmit={(e) => this.createFish(e)}> 
      <Form.Group >    
      <input 
       ref={input => this._url = input} 
       type='text' 
       width={6} /> 
      <input 
       ref={input => this._title = input} 
       type='text 
       width={6} /> 
      </Form.Group > 
      <Button fluid type='submit'>Submit</Button> 
     </Form> 
     </Segment> 
    ) 
    } 
}