javascript - 如何在 ReactJS 中的多个基于类的组件上使用 Formik

Question

我对 ReactJS 很陌生，如果我有 FormSectionOne.js（包含输入字段的容器）和 InputFieldsOnSectionOne.js（包含输入字段定义），我需要一些有关如何使用 Formik 的帮助

示例代码：

CreateEmployeeInformation.js

class CreateEmployeeInformation extends Component {

  constructor(props) {
    super(props);
    // Set initial value of states
    this.state = {
      inputField1: "", inputField2: "", inputField3: ""
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  // Updates the state based from the name of the input field
  handleInputChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  // Function to display current values
  handleClick(event) {
    console.log(JSON.stringify(this.state));
  }

  componentDidMount() {
    // Initialize materialize-css individually explicitly
    // Collapsible
    M.Collapsible.init(document.querySelectorAll('.collapsible'), {});
  }

  componentDidUpdate() {
    // Initialize materialize-css individually explicitly
    // Collapsible
    M.Collapsible.init(document.querySelectorAll('.collapsible'), {});
  }

  render() {
    // Local variables of states
    const {
      inputField1, inputField2, inputField3
    } = this.state;
    return (
      <div>
        <div className="fixed-scrollable">
          <div className="row flex-row">
            <ul className="collapsible col s8 pull-s2">
              <li key="1">
                <WorkDetails 
                  inputField1={inputField1}
                  inputField2={inputField2}
                  inputField3={inputField3}
                  onChange={this.handleInputChange}
                />
              </li>
            </ul>
          </div>
        </div>
        <br/>
        <button className="btn waves-effect waves-light" style={{display:"block",margin:"auto"}} type="submit" name="action" onClick={this.handleClick}>
          Submit
          <i className="material-icons right">send</i>
        </button>
      </div>
    );
  }

}

export default connect()(CreateEmployeeInformation);

WorkDetails.js

class WorkDetails extends Component {

  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentDidMount() {
    // Initialize materialize-css individually explicitly
    // Materialbox
    M.Materialbox.init(document.querySelectorAll('.materialboxed'), {});
    // Text Fields
    M.updateTextFields();
  }

  componentDidUpdate() {
    // Initialize materialize-css individually explicitly
    // Materialbox
    M.Materialbox.init(document.querySelectorAll('.materialboxed'), {});
    // Text Fields
    M.updateTextFields();
  }

  handleInputChange(event) {
    this.props.onChange(event);
  }

  render() {
    return (
      <>
        <div className="collapsible-header">
          <i className="small material-icons left">work</i>
          Work Details
        </div>
        <div className="collapsible-body">
          <div className="row no-btm-margin">
            <div className="col s12">
              <div className="col s6">
                <div className="row no-btm-margin">
                  <div className="col s12">
                    <EditableTextField
                      id="inputField1"
                      name="inputField1"
                      label="Input Field 1"
                      value={this.props.inputField1}
                      onChange={this.handleInputChange}
                    />
                  </div>
                </div>
                <div className="row no-btm-margin">
                  <div className="col s12">
                    <EditableTextField
                      id="inputField2"
                      name="inputField2"
                      label="Input Field 2"
                      value={this.props.inputField2}
                      onChange={this.handleInputChange}
                    />
                  </div>
                </div>
                <div className="row no-btm-margin">
                  <div className="col s12">
                    <EditableTextField
                      id="inputField3"
                      name="inputField3"
                      label="Input Field 3"
                      value={this.props.inputField3}
                      onChange={this.handleInputChange}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }

}

export default WorkDetails;

我希望这种结构有一个可能的解决方案，因为我将每个部分的所有输入字段一分为二。