创建对象并将其传递给父组件的最佳做法是什么？

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