Доступ к переменной из импортированного класса из другого скрипта 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
Есть ли способ сделать это?
Спасибо!
Раньше я сохранял такие переменные на верхнем уровне, а затем отправлял как свойство: <MyModule id=... selectedValues={this.state.selectedValues} addValue={this.addValue}
Итак, определите выбранную переменную значений в this.state={selectedValues: ''} на стороне App.js, тогда как я могу получить ее в файле myModule.js?
Ответы 3
По сути, ваше состояние (selectedValues) должно подняться на один уровень вверх в дереве React. Вы должны объявить его как состояние App, а затем передать его MyModule через реквизит.
Кстати, в addValue() вы не меняете никакого состояния. И this.selectedValues будет неопределенным. Это this.state.selectedValues и this.props.selectedValues, как только вы исправите свой код.
хорошо замечено... обновление selectedValues имеет ошибку, потому что оно не использует setState
Редактировать 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 Да. Вы можете использовать refs для доступа к состоянию и всем методам, закрытым для MyModule, используя current. Я создал для вас скрипку, пожалуйста, проверьте jsfiddle.net/xzehg1by/9
Я думаю, вы должны сначала прочитать все концепции реагирования, а затем начать работать над этим. Во всяком случае, я изменяю ваш код одним способом, чтобы получить желаемую функциональность, но помните, что это не лучшая практика, вы должны использовать 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
Это должно сделать вашу работу
Вы можете использовать React Context (reactjs.org/docs/context.html) для обмена состоянием между компонентами или позволить родительскому компоненту (в данном случае
<App/>) обрабатывать состояние и передавать его дочернему компоненту (<MyModule/>).