javascript - 从另一个文件中的另一个组件更改一个组件的状态
问题描述
总的来说,我是 React 和 web 开发的新手。我创建了一个组件,其中包含存储在Buttons.js
.
还有一个名为 Submit 的组件存储在Submit.js
. 提交组件基本上是一个文本框,我们在其中输入我想稍后处理的数学表达式。
然后在另一个组件调用中调用这两个组件Leftwindow.js
。
所以我的问题是,如何让点击Buttons
组件影响组件中的文本框Submit
。我知道如果按钮和输入框是单个组件的一部分,它可以很容易地完成。基本上,如果我按下“1”按钮,我希望将其添加到输入框中。
它的外观快照 -
代码Buttons.js
-
class Buttons extends Component {
constructor(props){
super(props);
this.state = {
//buttonrows//
};
}
render(){
const row1elems = this.state.row1.map((button) => {
return (
<Button color={colours[button.type]} className="buttonsize">{button.label}</Button>
);
});
const row2elems = this.state.row2.map((button) => {
return (
<Button color={colours[button.type]} className="buttonsize">{button.label}</Button>
);
});
const row3elems = this.state.row3.map((button) => {
return (
<Button color={colours[button.type]} className="buttonsize">{button.label}</Button>
);
});
const row4elems = this.state.row4.map((button) => {
return (
<Button color={colours[button.type]} className="buttonsize">{button.label}</Button>
);
});
return (
<div className="center">
<ButtonGroup>
{row1elems}
</ButtonGroup>
<ButtonGroup>
{row2elems}
</ButtonGroup>
<ButtonGroup>
{row3elems}
</ButtonGroup>
<ButtonGroup>
{row4elems}
</ButtonGroup>
</div>
);
}
}
export default Buttons;
代码Submit.js
-
class Submit extends Component{
constructor(props){
super(props);
this.state = {
fx: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event){
const target = event.target;
const val = target.val;
const name = target.name;
this.setState({
[name]: val
})
}
handleSubmit(event){
}
render(){
return(
<div>
<Form onSubmit={this.handleSubmit}>
<FormGroup row>
<Col md={12}>
<Input type="text" id="fx" name="fx" placeholder="Type Here" value = {this.state.fx} onChange={this.handleInputChange} />
</Col>
</FormGroup>
</Form>
<Button type="submit" color="primary">Differentiate</Button>
</div>
)
}
}
export default Submit;
代码LeftWindow.js
——
import React, { Component } from 'react';
import Buttons from './Buttons';
import './Custom.css';
import Submit from './Submit';
class LeftWindow extends Component{
constructor(props){
super(props);
}
render(){
return(
<div className="col-3 bg-dark fullheight">
<Buttons/>
<h3 className="center">Enter the function to be differentiated</h3>
<Submit/>
</div>
);
}
}
export default LeftWindow;
解决方案
在 React 中,您使用组件树,其中数据可以从上到下传输。可以通过传递的回调通知父组件有关更改的数据。如果您有两个组件具有共同的祖先,您可以通过这个共同的祖先在它们之间共享数据。
假设您有组件 Parent 来呈现您的 Buttons 和 Submit 组件。如果您将数据(或状态)存储在 Parent 中并将此数据作为带有回调的 props 传递,则您的组件可以通知 Parent 发生的事情,并且 parent 可以更改其状态并将新状态作为 props 传递给孩子。
当您的数据与组件分离并逐个注入时,有一种“状态管理”解决方案。在这种情况下,您不需要 parent 来存储数据,但如果我们谈论纯反应 - 在反应树的分支之间共享数据,这个分支应该在树的某个地方有共同的祖先。
推荐阅读
- swift - 使用 ShouldPerformSegue 取消在情节提要中创建的转场
- ios - 重用单个 SKView 生成多个 SKTexture 以供在 SceneKit 中使用
- object - 在java中从Object类型数据转换为int类型数据
- c - 来自命令行的有效负载不会覆盖堆栈
- c# - 如何从包含字符串数组的 JSON 中选择值?
- pandas - groupby的平均值,在变量上切割后
- php - Symfony 3.14 createForm 构建器未定义方法添加
- javascript - 无法使用nodejs启动js文件
- javascript - Webpack copyFiles将文件从子目录复制到主目录
- javascript - 重新定位后 Javascript OpenLayers 填充不透明度增加