Question

我了解到，最好最大程度地减少类组件的数量，并将所有逻辑保留在尽可能少的组件中。通过将其放入SearchBar组件的输入标记中，我设法创建了一个仅包含1类组件的待办事项列表：

onChange={e => props.updateVal(e.target.value)}

这正是我想要的，然后将这1个数据发送回父级的updateVal函数。

我想弄清楚的是如何使用1个表单提交来做到这一点，其中包含多个输入，这些输入都是文本字段。可能吗我想远离ref并将组件更改为类。这对我来说只是一种做法，因为我会更好地做出反应，任何见解都会受到赞赏。

Answer 1

致力于制作可在整个应用程序中使用的可重用组件。

例如，您可以创建自己的可重复使用的input：

import React from 'react';

// props will consist of "value", "onChange", "name" and a "placeholder"
const Input = props => <input type="text" {...props} />

export default Input;

现在创建一个container来处理所有输入的values;

import React, { Component } from 'react';
import Input from '../Input";

const fields = [
 {
   name: "company",
   placeholder: "Company"
 },
 {
   name: "email",
   placeholder: "Email"
 },
 {
   name: "firstName",
   placeholder: "First Name"
 },
 {
   name: "lastName",
   placeholder: "First Name"
 },
];

class Form extends Component {
  state = { firstName: "", lastName: "", email: "", company: "" };

  handleChange = ({ target: {name, value} }) => this.setState({ [name]: value });

  handleSubmit = e => {
   e.preventDefault();
   alert(JSON.stringify(this.state, null, 4));
  }

  render = () => (
    <form onSubmit={this.handleSubmit}>
     {fields.map(props => <Input key="props.name" onChange={this.handleChange} {...props} /> )}   
     <button type="submit">Submit</button>
    </form>
  );

};

 export default Form;

工作示例（一个class组件和一个可重用组件-单击Run code snippet）：

const Input = props => <input type="text" {...props} />

const fields = [
  { name: "company", placeholder: "Company" },
  { name: "email", placeholder: "Email" },
  { name: "firstName", placeholder: "First Name" },
  { name: "lastName", placeholder: "First Name" }
];
    
class Form extends React.Component {
  state = { firstName: "", lastName: "", email: "", company: "" };
    
  handleChange = ({ target: {name, value} }) => this.setState({ [name]: value });
    
  handleSubmit = e => {
    e.preventDefault();
    alert(JSON.stringify(this.state, null, 4));
  }
    
  render = () => (
    <form onSubmit={this.handleSubmit}>
      {fields.map(props => <Input key="props.name" onChange={this.handleChange} {...props}/>)}   
      <button type="submit">Submit</button>
    </form>
  );
};

ReactDOM.render(<Form />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

您可以更进一步，使Form可重用；但是，随着表单使用不同的输入，字段级别的验证和字段样式变得更加复杂，维护起来将变得更加困难。

我建议您在开始进入有前途的hooks之前，先学习如何利用class。

Answer 2

我的建议是将Redux-form与react配合使用以更好地处理表单，

LIbrary Reference - Redux Form

Watch This Tech Talk - Before Click Reference

将表单值从子功能组件发送到父类组件

2 个答案: