react.js - react 在同一个父组件下的两个子组件如何传递数据或状态？(已解决)

问题描述

问 题

在一个父组件中，子组件A的值来会通过子组件B的点击事件进行修改。

我现在已经将子组件B修改的值存放在父组件的state中了，但是该如何将改变的值放入子组件A中呢？

上最终解决代码：
父组件：

import React, { Component } from 'react';
import { Card, Button, Row, Col } from 'antd';
import SelfChildrenOne from './selfChildrenOne.jsx';
import SelfChildrenTwo from './selfChildrenTwo.jsx';
class SelfPractice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      OneValue: '111',
    }
  }
  componentDidMount = () => {
    this.changeValue();
  }
  changeValue = (values) => {
    console.log("values---will----"+values);
    this.setState({
      OneValue: values
    }, this.showChange);
    // this.inteval = setTimeout(() => this.showChange(), 300);
  }
  showChange = () => {
    console.log("this.state.OneValue----did-----"+this.state.OneValue);
  }
  render() {
    return (
      <div>
        <Card
          title="数据展示Card"
        >
          <SelfChildrenOne OneValue={this.state.OneValue} />
        </Card>
        <Card
          title="数据改变"
        >
          <SelfChildrenTwo changeValue={this.changeValue} />
        </Card>
      </div>
    )
  }
}

export default SelfPractice;

子组件A：

import React, { Component } from 'react';
import { Input } from 'antd';
class SelfChildrenOne extends Component {
  render() {
    return (
      <div>
        <Input value={this.props.OneValue} />
      </div>
    )
  }
}

export default SelfChildrenOne;

子组件B：

import React, { Component } from 'react';
import { Button } from 'antd';
const SelfChildrenTwo = ({ changeValue }) => {
  const changeValues = '改变之后';
  const changeValues2 = '改变之后2'
  return (
    <div>
      <Button onClick={(value) => changeValue(changeValues)}>改变数据</Button>
      <Button onClick={(value) => changeValue(changeValues2)}>改变数据2</Button>
    </div>
  )
}

export default SelfChildrenTwo;

已解决此问题，解决方式：在this.setState的回调函数中调用showChange()即可

解决方案

兄弟组件之间状态更新, 建议使用redux
推荐一个入门教程 Redux 入门教程

说可以肯定是可以, 但是前提我先说一下, redux 肯定是最好的方法.

所有值(有关通信的)都放在父组件中更新, 子组件调用父组件的方法更新父组件的state, 传入到另外一个子组件中 通过this.props.xxx去获取

这篇关于react.js - react 在同一个父组件下的两个子组件如何传递数据或状态？(已解决)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！