如何存储输入文本值并在不同组件 Mobx 中使用它？

Question

下面是一个输入按钮组件；它接受字符串输入。因为我使用的是 create-react-app v3.0，所以我使用的是没有装饰器的 mobx。因为我是 mobx 的新手，所以我不知道如何存储字符串值的状态，以便我可以在其他组件中引用它。

代码如下：

export  class NumberButton extends Component {
    constructor(props) {
       super(props);
        this.state = {
           value: null
        };

        }  



    render() {
        return (
            <div>
                <div className="content-section introduction">
                    <div className="feature-intro">
                    </div>
                </div>

                <div className="content-section implementation">
                    <div className="content-section implementation">
                        <h3 className="Number"> Number</h3>
                     {/*takes and stores input in value*/}   <InputText  type="text"  value={this.state.NumberValue} onChange={(e) => this.setState({ NumberValue: e.target.value })} style={{width: "105%", height:"40px", }} />
                    </div>
                </div>
            </div>
        );
    }

}

如何获取值的状态并存储它，以便我可以在其他组件中使用它？感谢您的帮助。

Answer 1

考虑使用 Context 在许多嵌套组件之间存储值。

https://pl.reactjs.org/docs/context.html

Answer 2

如果你想为此目的使用 MobX，你可以创建单独的商店来控制它的状态：

import { decorate, observable, action } from 'mobx';

class ButtonStore {
    value = null;

    setValue(value) {
        this.value = value;
    }
}

decorate(ButtonStore, {
    value: observable,
    setValue: action
})

export  class NumberButton extends Component {
    constructor(props) {
       super(props);
    }  

    render() {
        const { store } = this.props;
        return (
            <div>
                <div className="content-section introduction">
                    <div className="feature-intro">
                    </div>
                </div>

                <div className="content-section implementation">
                    <div className="content-section implementation">
                        <h3 className="Number"> Number</h3>
                        <InputText type="text"  value={store.value} onChange={(e) => store.setValue(e.target.value) } style={{width: "105%", height:"40px", }} />
                    </div>
                </div>
            </div>
        );
    }
}

然后在您的父组件状态下，您只需实例化该商店：

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            buttonStore: new ButtonStore()
        }
    }

    render() {
        return <NumberButton store={this.state.buttonStore} />
    }
}

另一种更简单的方法是使用 React Hooks 来处理该输入。

请注意，此代码未经测试，仅供参考！

如何存储输入文本值并在不同组件 Mobx 中使用它？

How to store an input text value and use it in different components Mobx?

reactjs

mobx