Как сохранить входное текстовое значение и использовать его в разных компонентах Mobx? - PullRequest
Новая
       17

Как сохранить входное текстовое значение и использовать его в разных компонентах Mobx?

0 голосов
/ 11 июля 2019

Ниже находится компонент, представляющий собой кнопку ввода;Он принимает ввод строки.Так как я использую create-response-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>
        );
    }

}

Как взять состояние значения и сохранить его, такчто я могу использовать его в других компонентах?Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 12 июля 2019

Если вы хотите использовать 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 для обработки этого ввода.

Обратите внимание, что этот код не проверен, просто идея!

0 голосов
/ 12 июля 2019

Рассмотрите возможность использования контекста для хранения значений между многими вложенными компонентами.

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

...