Question

总的来说，我是 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;

Answer 1

在 React 中，您使用组件树，其中数据可以从上到下传输。可以通过传递的回调通知父组件有关更改的数据。如果您有两个具有共同祖先的组件，您可以通过这个共同祖先在它们之间共享数据。

假设您有组件 Parent，它呈现您的按钮和提交组件。如果您将数据（或状态）存储在 Parent 中并将这些数据作为带有回调的 props 传递，那么您的组件就可以通知 Parent 发生的事情，并且父级可以更改它的状态并将新状态作为 props 传递给子级。

当您的数据与组件分离并逐个注入时，有一种“状态管理”解决方案。在这种情况下，您不需要父级来存储数据，但如果我们谈论纯反应 - 在反应树中的分支之间共享数据，这些分支应该在树中的某处具有共同的祖先。

Answer 2

这就是您的共同祖先文件的样子 -

添加了具有输入的状态。
添加了更新此输入状态的回调“handleInputChange”。
将此回调传递给两个组件。

在您的 Submit.js 文件中，您需要使用此更改您的输入标签

<Input 
    type="text"
    value={this.props.input}
    onChange={e => {
        this.props.handleInputChange(e.target.value);
    }}
 />

也在您的 Buttons.js 文件中，在单击按钮时调用 this.props.handleInputChange。

<Button
    onClick={() => {
        this.props.handleInputChange(button.label)
    }} 
    color={colours[button.type]} 
    className="buttonsize"
>
    {button.label}
</Button>

就是这样。

希望能帮到你！

从另一个文件中的另一个组件更改一个组件的状态

2 个答案: