Question

我只是想知道当用户提交时如何检索表单数据，我希望能够在console.log中看到它。这是我的父组件的外观。请注意：我是新来的人。...谢谢！

class App extends Component {

 render() {

   return (

      <div className="App">

      //Each component contains a seperate page with a form element
      <PageOne />

      <PageTwo />
      <PageThree />
      <PageFour />
      <PageFive />
      <PageSix />

      <Button>
         Submit Form
      </Button>

      <br/>
      <br/>



      </div>

   );
 }
}

Answer 1

这是一个简单的例子。您应该将函数传递给onSubmit的{{1}}属性。该函数接收一个事件对象，该对象将在form属性中具有所有子对象的数组。您可以选择要作为其值的字段的索引，该索引将位于target属性中。在下面的示例中，我们正在记录输入的值。

value

const onSubmit = (event) => {
  event.preventDefault();
  console.log('event', event.target[0].value);
};

const SimpleForm = () => (
  <form onSubmit={onSubmit}>
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
);

ReactDOM.render(
  <SimpleForm />,
  document.body
);

获取子组件中的表单数据给父组件以进行提交

1 个答案: