Output 数据来自页面上的表单反应

Question

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

应用程序（使用 header 和按钮呈现主页）

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

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

Answer 1

您可以在 App 组件中创建一个 function (addTodo) 并将其传递给 TodoForm 组件。 在 TodoForm 组件中，您可以从 props 调用 addTodo function 并将 todoValue 作为 arguments props.addTodo(todoValue)发送。 在 App 组件的 addTodo function 中，您可以将 todoValue 更新为 state。 更新 state 后，它将重新渲染 App 组件，然后 TodoBox 组件将调用更新后的 todoValue 值。

注意：但这不是最佳实践。 最佳实践是使用React Context