Javascript 如何在子组件中提交数据

我在子组件a上有一个简单的表单。在提交时，我将表单中的数据传递给父组件，并将数据存储在state中。。然后，我想将此数据移动到另一个子组件B（a的兄弟）

我无法在组件B中获取提交时渲染的数据。我不确定如何在提交时触发渲染，或者如何在提交时通过道具传递此信息

这是家长

class Msg扩展了React.Component{
建造师（道具）{
超级（道具）；
this.storeInput=this.storeInput.bind（this）；
此.state={
名称：“”，
消息：“”
};
}
存储输入（d）{
这是我的国家({
姓名：d.name，
msg:d.msg
})
}
render（）{
返回(
)
}
}

只需将状态作为道具传递到输出，如下所示：

父组件：

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;

从“React”导入React；
从“./Input”导入输入；
从“./Output”导入输出；
类Msg扩展了React.Component{
状态={name:''，msg:''}；
storeInput=d=>{
this.setState（{name:d.name，msg:d.msg}）；
};
render（）{
//解构状态
const{name，msg}=this.state；
返回(
{/*将状态作为道具传递给输出*/}
);
}
}
导出默认消息；

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;

从“React”导入React；
类输入扩展了React.Component{
状态={name:''，msg:''}；
handleChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
handleSubmit=e=>{
e、 预防默认值（）；
this.props.passBack（this.state）；
this.setState（{name:''，msg:''}）；//提交后清除输入
};
render（）{
const{name，msg}=this.state；
返回(
名称
消息
);
}
}
导出默认输入；

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;

从“React”导入React；
//分解来自Msg的道具
//不需要基于类的组件
常量输出=（{name，msg}）=>(
输出
{name}

{msg}

);
导出默认输出；

---

现场演示：

请正确格式化您的代码。我不确定您看到了什么问题，它有两种

渲染方法。其中一个突然结束了。考虑到它的组件类，它并没有完全发布。如果不考虑，至少应该有两个。考虑到您对特定代码有问题，请提供。代码示例已更改，以反映全部3个相关组件。当<代码>状态更改时，组件将重新呈现。我不确定问题出在哪里，但尝试类似这样的方法，然后在组件B中，
console.log（this.props.whatever）
应该会给出您的新状态，或者可能我问错了问题，这将有助于解释更改，而不仅仅是发布一些代码！您确定正在执行
const{name，msg}=this.state在呈现良好实践中？@SakoBu这是问题的解决方案，因此感谢您的洞察力。但我注意到，当我再次提交表单时，以前的数据会被删除，并用新的输入重新呈现。我是否需要一个不同的结构，以便在页面关闭/重新加载之前保存所有提交内容？@4cody-是。。。您可以考虑将状态存储在父数组中，每个提交向该数组追加一个新的MSG……@ 4CODY，这可能是您想要的……