在一个父组件中,子组件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去获取