从另一个React脚本从导入的类访问变量

Question

I'm importing a class from another script in my main React App, and would like to access a variable within that class from the main App. Basically the user types something into a textbox, then clicks a button to add that value to a variable. In the main App I import that class, then have another button to print those values (selectedvalues). I'm not entirely sure how to do it, but this is my code so far:

Class I am importing:

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

And where I would like to actually access that value

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

Is there a way I can do this?

Thanks!

Answer 1

Edit JS-fiddle here https://jsfiddle.net/xzehg1by/9/

You can create Refs and access state and methods from it. Something like this.

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

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

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

more info here https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

Basically, your state ( selectedValues ) has to go one level up in the React tree. You have to declare it as App 's state, and then pass it down to MyModule via props.

Btw in addValue() , you're not changing any state. And this.selectedValues will be undefined. It's this.state.selectedValues , and this.props.selectedValues once you correct your code.

Answer 3

I think you should first read all react concepts and then start working on it. Anyhow i am modifying your code in one way to get your desired functionality but remember this is not best practice you have to use Redux for this kind of features

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

and your main component should be

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

This should do your work