Question

我在子组件A上有一个简单的表单。提交后，我将数据从表单传递到父组件，并以状态存储数据。.然后我想将此数据移动到另一个子组件B.（A的兄弟姐妹）

我在组件B中获取要提交的数据时遇到了麻烦。我不确定如何触发提交的渲染或如何通过提交时的道具传递此信息。

这是父母

class Msg extends React.Component {
    constructor(props) {
        super(props);
        this.storeInput = this.storeInput.bind(this);
        this.state = {
            name: '',
            msg: ''
        };
    }

    storeInput (d) {
        this.setState({
            name: d.name,
            msg: d.msg
        })
    }

    render() {
        return(
            <div className='msgContainer'>
                <Input 
                    passBack={this.storeInput}/>
                <Output />
            </div>     
        )
    }
}

这里是成分A

class Input extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            name: '',
            msg: ''
        };
    }

    handleChange(e) {
        this.setState({[e.target.name]: e.target.value})
    }

    handleSubmit(e) {
        e.preventDefault();
        this.props.passBack(this.state);
    }

    render () {
        const name = this.state.name;
        const msg = this.state.msg;

        return (
            <div className='form-container'>
                <form action="">
                    <label htmlFor="">name</label>
                    <input 
                      name='name'
                      value={name}
                      onChange={this.handleChange}
                      type='text'></input>
    
                    <label htmlFor="">message</label>
                    <textarea 
                      name='msg'
                      value={msg}
                      onChange={this.handleChange}
                      rows='5' cols='80'></textarea>
    
                    <input 
                      onClick={this.handleSubmit}
                      type='submit'></input>
                </form>
            </div>
        )
    }
}

这里是成分B

class Output extends React.Component {
    render () {
        return(
            <div className='output'>
                
            </div>
        )
    }  
}

Answer 1

只需将状态作为道具传递给Output，就像这样：

父项：

import React from 'react';

import Input from './Input';
import Output from './Output';

class Msg extends React.Component {
  state = { name: '', msg: '' };

  storeInput = d => {
    this.setState({ name: d.name, msg: d.msg });
  };

  render() {
    // destructure the state
    const { name, msg } = this.state;
    return (
      <div className="msgContainer">
        <Input passBack={this.storeInput} />
        {/* pass the state as props to Output */}
        <Output name={name} msg={msg} />
      </div>
    );
  }
}

export default Msg;

Input.js

import React from 'react';

class Input extends React.Component {
  state = { name: '', msg: '' };

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

  handleSubmit = e => {
    e.preventDefault();
    this.props.passBack(this.state);
    this.setState({ name: '', msg: '' }); // clear up the input after submit
  };

  render() {
    const { name, msg } = this.state;

    return (
      <div className="form-container">
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="">name</label>
          <input
            name="name"
            value={name}
            onChange={this.handleChange}
            type="text"
          />
          <label htmlFor="">message</label>
          <textarea
            name="msg"
            value={msg}
            onChange={this.handleChange}
            rows="5"
            cols="80"
          />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

export default Input;

Output.js

import React from 'react';

// destructure the props coming in from Msg
// no need for a class-based component

const Output = ({ name, msg }) => (
  <div className="output">
    <div>Output</div>
    <p>{name}</p>
    <p>{msg}</p>
  </div>
);

export default Output;

实时演示：https://jsfiddle.net/c8th67zn/

如何呈现子组件中提交的数据

1 个答案: