反应子列表组件答案

【问题标题】：React Child List Component反应子列表组件
【发布时间】：2019-01-20 16:48:18
【问题描述】：

我正在学习 React，以下场景的最佳做法是什么？（注意只是输入了这个 - 并不完美，只是为了说明我正在尝试做的事情）。鉴于这些数据 -

const person = {
   name: "",
   tasks: [
     {name: "", done: false }
   ]
 }

我想要一个表单来同时编辑名称和任务 - 添加、删除和编辑任务的字段。

我在想什么：

<PersonForm>
 <PersonName />
 <TaskList />
</PersonForm>

这个名字可以通过react文档给出的例子轻松编辑：

class PersonForm extends React.Component {
    constructor(props) {
        this.state  = {
            name: "",
            tasks: [
                {name: "", done: false }
            ]
        };
    }
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({ [name]: value });
    }
    render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <PersonName name={this.state.name} onChange={this.handleInputChange} />
            <TaskList tasks={this.state.tasks} 
               deleteTask={this.deleteTask} 
               addTask={this.addTask} 
               updateTask={this.updateTask}/>
            <input type="submit" value="Submit" />
          </form>
        );
    }
}

class PersonName extends
   render() {
    return (
     <label>
          Name:
          <input type="text" name="name" value={this.props.value} onChange={this.props.onChange} />
        </label>
     )
   }
}

我知道建议是提升状态。所以我可以将 addTask、removeTask 和 updateTask 回调方法放在 PersonForm 中。

class PersonForm extends React.Component {
. . .
addTask = event => {
  this.setState(prev => ({ tasks: [...prev, {name: "", done: false}]}));
}
removeTask = key => {
  this.setState(prev => ({ tasks: prev.filter(t => t.key !== key) });
}
updateTask = ???...
. . .

但是，

在我看来，封装功能的最佳方式是将 addTask、deleteTask、updateTask 功能放在 TaskList 组件中。我错了吗？

看起来，否则 PersonForm 会变得很大（在现实世界的例子中）。这是否意味着 TaskList 需要状态？

基本上，

此子列表方案的最佳做法是什么？
如果来自顶部的回调是答案，如何更新任务数据？

【问题讨论】：

标签： reactjs design-patterns

【解决方案1】：

当组件开始变得庞大时将一些逻辑移到组件之外是有意义的，但同时将所有表单状态保存在一个地方很方便。您可以在子组件上使用 ref 来检索它的状态，但这是一个丑陋的解决方案，并且被认为是一种不好的做法。我相信根据我的经验，我没有遇到过非常大的表单，所以即使它们是大组件，阅读/管理那里的所有状态也很好。但是，如果您真的想从中删除一些逻辑，我认为您可以使用新的上下文 API 来存储表单的状态（或只是任务列表的状态）并在 PersonForm 组件中订阅它（到阅读）和TaskList（阅读和更改）。

【讨论】：