創建對象並將其傳遞給父組件的最佳做法是什麼？

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

您可以通過提供更基因來簡化您的代碼

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); 

，並用它在你的元素

<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} 
    ... 
/> 

name屬性將輸入端連接到正確的狀態：哪些更新狀態c方法值

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