如何将表单输入字段传递给 React 中的另一个组件? [英] How to pass form input fields to another component in React?

问题描述

我正在使用 React 创建一个待办事项列表应用程序，此阶段不涉及后端.目前我有两个组件，Type 和 ListTable.Type 是一个表单组件，ListTable 是一个表格组件，用于显示存储在 this.state 中的数据.

我想要实现的是，我在form中输入后，点击Type组件中的submit按钮，state数据在>Type 将作为 props 传递给 ListTable 组件，表格数据将相应改变.但我不知道如何做到这一点，相反，我在 ListTable 组件中添加了一个额外的按钮 refresh，以在 中调用 onSubmitt 函数> 类型 组件.这种方式有效，但我认为不太体面.

这是我的代码 https://codepen.io/heiweigou/pen/vRKjzR?editors=0010

解决方案

我会在这里提出不同的组件架构.你看，你的 ListTable 是一个子 Type 组件，尽管这不是最好的方法.
创建一个新组件，它将成为两者的父组件，例如

class ParentComponent extends Component {构造函数(道具){超级(道具)；this.state = { todos: [] };this.addTodo = this.addTodo.bind(this);}添加Todo(待办事项){this.setState({ todos: [...this.state.todos, todo] })}...使成为() {返回 (<div><ListTable todos={this.state.todos}/>//传递待办事项<输入 addTodo={this.addTodo}/>//传递一个addTodo函数

);}}

您可以向 Type 组件传递一个函数来更新 ParentComponent 的状态，然后将该状态传递给 ListTable 组件以呈现您的待办事项.
而 Type 组件的 onSubmit 函数应该只更新其父组件的状态，不应该返回任何东西.

onSubmit() {this.props.addTodo(this.state);}

更新:
从 Task 的添加按钮中移除 onClick 处理程序并将 onSubmit 处理程序添加到表单中:

并像这样声明这个处理程序:

handleFormSubmit(e) {e.preventDefault();this.props.addTodo(this.state);}

你的 ListTable 的 table 函数也应该遍历 props.todos 而不是 state.

I am using React to create a to-do-list app, and no back-end is involved at this stage. Currently I have two components, Type and ListTable. Type is a form component and ListTable is a table component that displays data stored in this.state.

What I want to achieve is, after I type in form, click submit button in Type component, the state data in Type will pass as props to ListTable component, and table data will change accordingly. But I do not know how to do this, instead, I add an additional button refresh in ListTable component, to call onSubmitt function in Type component. This ways works but not quite decent I reckon.

Here is my code https://codepen.io/heiweigou/pen/vRKjzR?editors=0010

解决方案

I would come up with a different component architecture here. You see, your ListTable is a child Type component, even though that is not quite the best approach.
Create a new component, which will be the parent of both, e.g.

class ParentComponent extends Component {
   constructor(props) {
      super(props);

      this.state = { todos: [] };
      this.addTodo = this.addTodo.bind(this);
   }

   addTodo(todo) {
      this.setState({ todos: [...this.state.todos, todo] })
   }
   ...
   render() {
      return (
         <div>
           <ListTable todos={this.state.todos} /> //passing todos
           <Type addTodo={this.addTodo} /> //passing a addTodo function
         </div>
      );
   }
}

You can pass your Type component a function to update the ParentComponent's state, and pass that state to ListTable component to render your todos.
And Type component's onSubmit function should only update its parent's component state, should not return anything.

onSubmit() {
   this.props.addTodo(this.state);
}

UPDATE:
Remove onClick handler from Task's add button and add onSubmit handler to the form:

<form onSubmit={this.handleFormSubmit.bind(this)}>

And declare this handler like so:

handleFormSubmit(e) {
  e.preventDefault();
  this.props.addTodo(this.state);
}

Your ListTable's table function should also loop through props.todos rather than state.

这篇关于如何将表单输入字段传递给 React 中的另一个组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！