Доступ к переменной из импортированного класса из другого скрипта React

Я импортирую класс из другого скрипта в свое основное приложение React и хотел бы получить доступ к переменной в этом классе из основного приложения. В основном пользователь вводит что-то в текстовое поле, затем нажимает кнопку, чтобы добавить это значение в переменную. В основном приложении я импортирую этот класс, затем у меня есть еще одна кнопка для печати этих значений (выбранные значения). Я не совсем уверен, как это сделать, но пока это мой код:

Класс, который я импортирую:

import React, { Component } from 'react';

class MyModule extends Component {

    constructor() {
        super();
        this.state = {
            selectedValues: '',
        }
     }

    addValue() {
        this.selectedValues += document.getElementById('textBox1').value + ', '
        return this.selectedValues  
    }

    render() {
        return(
            <div>
                <input type='text' id='textBox1' />
                <button onClick={() => this.addValue()}>Add Value</button>
            </div>
        )
    }
  }

export default MyModule

И где я хотел бы получить доступ к этому значению

import React, { Component } from 'react';
import MyModule from './myModule.js'

class App extends Component {

    constructor() {
        super();
        this.state = {

        }
     }

    printValues() {
         console.log(document.getElementById('themodule').selectedvalues)
     }

    render() {
        return(
            <MyModule id='themodule' />
            <button onClick={() => printValues()}>Print values</button>
        )
    }
  }

export default App

Есть ли способ сделать это?

Спасибо!

Вы можете использовать React Context (reactjs.org/docs/context.html) для обмена состоянием между компонентами или позволить родительскому компоненту (в данном случае <App/>) обрабатывать состояние и передавать его дочернему компоненту (<MyModule/>).

Luuuud 22.05.2019 14:53

Раньше я сохранял такие переменные на верхнем уровне, а затем отправлял как свойство: <MyModule id=... selectedValues={this.state.selectedValues} addValue={this.addValue}

Joao Polo 22.05.2019 14:54

Итак, определите выбранную переменную значений в this.state={selectedValues: ''} на стороне App.js, тогда как я могу получить ее в файле myModule.js?

Djaenike 22.05.2019 15:02
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
3
5 969
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

По сути, ваше состояние (selectedValues) должно подняться на один уровень вверх в дереве React. Вы должны объявить его как состояние App, а затем передать его MyModule через реквизит.

Кстати, в addValue() вы не меняете никакого состояния. И this.selectedValues будет неопределенным. Это this.state.selectedValues и this.props.selectedValues, как только вы исправите свой код.

хорошо замечено... обновление selectedValues ​​​​имеет ошибку, потому что оно не использует setState

Joao Polo 22.05.2019 14:55
Ответ принят как подходящий

Редактировать JS-рабочий пример здесь https://jsfiddle.net/xzehg1by/9/

Вы можете создавать Refs и получать доступ к состоянию и методам из него. Что-то вроде этого.

constructor() {
   this.myRef = React.createRef();
}

render() { ... <MyModule id='themodule' ref={this.myRef} /> }

printValues() {
   console.log(this.myRef)
}

больше информации здесь https://reactjs.org/docs/refs-and-the-dom.html

Спасибо. Могу ли я получить доступ к значениям состояния из MyModule таким образом? Когда console.log this.myRef, он просто возвращает current: null. Я также получаю предупреждение: components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Не знаю, как это повлияет на функциональность.

Djaenike 22.05.2019 16:54

@Djaenike Да. Вы можете использовать refs для доступа к состоянию и всем методам, закрытым для MyModule, используя current. Я создал для вас скрипку, пожалуйста, проверьте jsfiddle.net/xzehg1by/9

sachin kalekar 22.05.2019 17:14

Я думаю, вы должны сначала прочитать все концепции реагирования, а затем начать работать над этим. Во всяком случае, я изменяю ваш код одним способом, чтобы получить желаемую функциональность, но помните, что это не лучшая практика, вы должны использовать Redux для таких функций.

import React, { Component } from 'react';

class MyModule extends Component {

    constructor() {
        super(props);
        this.state = {
            inputValue : ''
        };
        this.handleInput = this.handleInput.bind(this);
        this.addValue = this.addValue.bind(this)
    }
    handleInput(e){
        this.setState({
            inputValue : e.target.value
        })
    }
    addValue() {
        this.props.addValue(this.state.inputValue);
    }

    render() {
        return(
            <div>
                <input type='text' id='textBox1' onChange={handleInput} />
                <button onClick={this.addValue}>Add Value</button>
            </div>
        )
    }
}

export default MyModule

и ваш основной компонент должен быть

import React, { Component } from 'react';
import MyModule from './myModule.js'

class App extends Component {

    constructor() {
        super(props);
        this.state = {
            selectedValues : ''
        };
        this.printValues = this.printValues.bind(this);
        this.addValues = this.addValues.bind(this);
    }

    printValues() {
        console.log(this.state.selectedValues);
    }

    addValues(val){
        this.setState({
            selectedValues : this.state.selectedValues + " , "+val
        })
    }
    render() {
        return(
            <React.Fragment>
            <MyModule addValue={this.addValues}/>
            <button onClick={this.printValues} >Print values</button>
            </React.Fragment>
        )
    }
}

export default App

Это должно сделать вашу работу

Другие вопросы по теме