javascript - 如何将一个组件表单输入数据发送到我的父组件以提交表单

问题描述

我有三个子组件，每个子组件都有一个父组件，我想将所有三个子组件表单注入我的父组件并进行提交。我的目标是以 json 格式显示所有三个表单数据。孩子 1：

import React, { Component } from 'react';
import { PropTypes } from 'react'

class Input extends Component {

  constructor(props){
    super(props);

    this.state = {
      id: '',
      inputType: '' ,
      inputFilePath: '',
      inputSchemaFilePath: '' ,
      streamName: '',
      processor: '',
      unit: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    //this.handleSubmit = this.handleSubmit.bind(this)
}  

handleInputChange = e => {
    console.log(e.target.value);
    //this.setState({[e.target.name] : e.target.value});
    this.setState({
      id: e.target.value,
      inputType: e.target.value,
      inputFilePath: e.target.value,
      streamName: e.target.value,
      processor: e.target.value,
      unit: e.target.value
    });
   
  };

  render() {
  
    return (
      <form>
      <div>
   
      <h2>Input:</h2>
        <ul>
            <li><label> Id : </label><input type="text" size="100" name="id" value={this.state.id} onChange={this.handleInputChange} /></li>
            <li><label> InputType : </label><input type="text" size="100" name="inputType" value={this.state.inputType} onChange={this.handleInputChange} /></li>
            <li><label> InputFilePath : </label><input type="text" size="100" name="inputFilePath" value={this.state.inputFilePath} onChange={this.handleInputChange}/></li>
            <li><label> InputSchemaFilePath : </label><input type="text" size="100" name="inputSchemaFilePath" value={this.state.inputSchemaFilePath} onChange={this.handleInputChange}/></li>
            <li><label> StreamName : </label><input type="text" size="100" name="streamName" value={this.state.streamName} onChange={this.handleInputChange}/> </li>
            <li><label> Processor : </label><input type="text" size="100" name="processor" value={this.state.processor} onChange={this.handleInputChange} /></li>
            <li><label> Unit : </label><input type="text" size="100" name="unit" value={this.state.unit} onChange={this.handleInputChange} /></li>
          <button> <span>+</span></button>
          <button> <span>-</span></button>
        </ul>
      </div>
      </form>
    );
  }
}
export default Input

孩子 2

import React, { Component } from 'react';
import { PropTypes } from 'react'

class Output extends Component {

   constructor(props){
    super(props);

    this.state = {
      id: '',
      outputType: '' ,
      saveMode: '',
      outputFilePath: '' ,
      outputSchemaFilePath: '',
      dependentIds: '',
      outputPartitionKeys: '',
      processor: ''
    }
    this.handleOutputChange = this.handleOutputChange.bind(this)
    //this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleOutputChange = e => {
    console.log(e.target.value);
    this.setState({
      id: e.target.value,
      outputType: e.target.value,
      saveMode: e.target.value,
      outputFilePath: e.target.value,
      outputSchemaFilePath: e.target.value,
      dependentIds: e.target.value,
      processor: e.target.value
    });
  };
  render() {

    return (
      <form>
      <div>
       <h1>Output:</h1>
        <ul>
            <li><label> Id : </label><input type="text" size="100" name="id" value={this.state.id} onChange={this.handleChange} /></li>
            <li><label> OutputType : </label><input type="text" size="100" name="outputType" value={this.state.outputType}  onChange={this.handleChange}/></li>
            <li><label> SaveMode : </label><input type="text" size="100" name="saveMode" value={this.state.saveMode} onChange={this.handleChange} /></li>
            <li><label> OutputFilePath : </label><input type="text" size="100" name="outputFilePath" value={this.state.outputFilePath} onChange={this.handleChange} /></li>
            <li><label> OutputSchemaFilePath : </label><input type="text" size="100" name="outputSchemaFilePath" value={this.state.outputSchemaFilePath} onChange={this.handleChange} /> </li>
            <li><label> DependentIds : </label><input type="text" size="100" name="dependentIds" value={this.state.dependentIds} onChange={this.handleChange} /></li>
            <li><label> OutputPartitionKeys : </label><input type="text" size="100" name="outputPartitionKeys" value={this.state.outputPartitionKeys} onChange={this.handleChange} /></li>
            <li><label> Processor : </label><input type="text" size="100" name="processor"  value={this.state.processor} onChange={this.handleChange}/></li>
            <button> <span>+</span></button>
            <button> <span>-</span></button> 
          </ul>    
        </div>
        </form>
    );
  }
}

export default Output

同样还有一个组件。父组件：

import React, { Component } from 'react';

import Input from './input';
import Transformation from './transformation';
import Output from './output';
import JSONPretty from 'react-json-pretty';
import { PropTypes } from 'react'

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        
      }

  handleSubmit(values) { 
    console.log(values)
   

    this.setState({ values })
    //code
  } 

  render() {
     return (
      <div class="ot">
      <h1>Header</h1>
        <b>Please fill all the required fields marked with <span class="req">*</span></b>
        <br/>
            
              <h2><Input /></h2>
              <h2><Transformation /></h2>
              <h2><Output /></h2>
              <button onClick={this.handleSubmit.bind(this)}>Show JSL</button>
          <JSONPretty id="json-pretty" data={this.data}></JSONPretty>

            </div>
      
        );
    }
}export default Parent

谁能建议应该在父组件中使用哪些代码？

标签： javascriptreactjsreact-native

javascript - 如何将一个组件表单输入数据发送到我的父组件以提交表单

问题描述

解决方案

推荐阅读