时间戳

首页 > 解决方案 > 反应子列表组件

reactjs - 反应子列表组件

问题描述

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

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 需要状态？

基本上，

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

标签： reactjsdesign-patterns

解决方案

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

推荐阅读