从页面上的表单输出数据反应

Question

我正在编写待办事项应用程序。现在我的目录中有主要文件：

应用程序（呈现带有标题和按钮的主页）

 export default class App extends React.Component {
   constructor(props) {
   super(props);
   this.state = { triggerText: 'Create a task' };
}
propTypes = {
  triggerText: PropTypes.string.isRequired,
  handleSubmit: PropTypes.object.isRequired,
};

render() {
  const { triggerText } = this.state;
  const { handleSubmit } = this.props;
  return (
   <div className="App">
     <header className="App-header">
     <h1>To Do List</h1>
     <div id="tasksList">
      <span className="tasks active">Tasks</span>
    </div>
    <div id="categoriesList">
    <span className="categories">Categories</span>
    </div>
    <div>
    <Container triggerText={triggerText} onSubmit={handleSubmit} /> // creates modal dialog and uses TodoForm
    </div>
  </header>
  <div id="container" className="container">
      <TodoBox tasks={[]}/>
    </div>
   </div>
  );
 }
}

TodoForm（创建表单）

export default class TodoForm extends React.Component {
  constructor(props) {
  super(props);
  this.state = { value: '', tasks: [] };
}
propTypes = {
handleSubmit: PropTypes.object.isRequired,
}

handleRemove = (currentTaskId) => (e) => {
  e.preventDefault();
  const { tasks } = this.state;
  this.setState({ tasks: tasks.filter(({ id }) => id !== currentTaskId) });
};

handleChange = (e) => {
  e.preventDefault();
  this.setState({ value: e.target.value });
}

handleSubmit = (e) => {
  e.preventDefault();
  const { value, tasks } = this.state;
  const newTask = { id: uniqueId(), text: value };
  this.setState({ value: '', tasks: [newTask, ...tasks] });
}

render() {
  const { value } = this.state;
  return (
    <form onSubmit={this.handleSubmit}>
      <div className="form-group">
        <label htmlFor="text"><strong>Create a task</strong></label>
        <input
        type="text"
        onChange={this.handleChange}
        value={value}
        required
        className="form-control"
        id="text"
        placeholder="I am going..."
      />
      </div>
      <div className="form-group">
        <button type="submit" className="form-control btn btn-primary">Add</button>
        </div>
    </form>
    );
  }
}

TodoBox（生成任务列表）

class Item extends React.Component {
  propTypes = {
  onRemove: PropTypes.object.isRequired,
  task: PropTypes.string.isRequired,
};
 render() {
    const { task, onRemove } = this.props;
    return (
      <div className="row">
        <div>
          <button type="button" className="btn btn-primary" onClick={onRemove}>-</button>
        </div>
        <div className="col-10">{task.text}</div>
      </div>
    );
  }
}

  export default class TodoBox extends React.Component {
    constructor(props) {
      super(props);
  }
   propTypes = {
    tasks: PropTypes.string.isRequired,
  }
   render() {
    const { tasks } = this.props;
    return (
     <div className="item">
       {tasks.map((task) => (
       <div key={task.id}>
       <Item task={task} onRemove={this.handleRemove} />
       <hr />
     </div>
     ))}
   </div>
   );
 }
}

问题是：如何将状态从 TodoForm 传递到 App 中的 TodoBox （现在初始化为空数组）。我想在标题元素之后的容器中的同一页面底部输出任务。

Answer 1

您可以在 App 组件中创建一个函数（addTodo）并将其传递给 TodoForm 组件。在 TodoForm 组件中，您可以从 props 调用 addTodo 函数并将 todoValue 作为参数发送props.addTodo(todoValue)。在 App 组件的 addTodo 函数中，您可以将 todoValue 更新为状态。一旦你更新了状态，它将重新渲染 App 组件，然后 TodoBox 组件将调用更新后的 todoValue 值。

注意：但这不是最佳做法。最佳做法是使用React Context