javascript - 如何在子组件中提交时呈现数据

Question

我在子组件 A 上有一个简单的表单。提交时，我将数据从表单传递到父组件并将数据存储在状态中。然后我想将此数据移动到另一个子组件B.(A的 sibling )

我无法在组件 B 中获取要在提交时呈现的数据。我不确定如何在提交时触发呈现或如何在提交时通过 props 传递此信息。

这是父级

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

像这样简单地将状态作为 Prop 传递给输出:

父组件:

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;

输入.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;

输出.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/