react js - how to populate values based on another DOM element value

Question

I have 2 input boxes. Based on one input(1) box value (on key up event), I am populating another input(2) box value. Currently, I am using document.getElementByID option to retrieve element id to populate the values. Is it recommended in react js ? pls suggest. Like to find a better way to to this in react js.

handleChange(e) {
    if(document.getElementById("getId").value.length > 4) {
    console.log("a")
    document.getElementById("getName").value = 
    document.getElementById("getId").value
   }
   }
render () {
return (
  <div>
     <Card>
        <div>
            <label>Id</label>
            <input type="text" id="getId" onKeyUp=  {this.handleChange.bind(this)}/>
            <div>
            <label>Name</label>
            <input type="text" id="getName" readOnly/>
            </div>
        </div>
    </Card>
   </div>
);

There's 2 other ways I can think of (that'd be a bit more react appropriate). One is to use refs instead of IDs on the inputs (this prevent issues with multiple instances of the same React components and is generally preferred). The other is, upon updating of the first input box, store the input box's new value in state and update it in real time. Then when rendering the second one you can have value={this.state.firstInputValue} — Jayce444
– Jayce444, Commented Oct 8, 2017 at 22:20

Steve Holgado · Accepted Answer · 2017-10-08 22:31:39Z

You could store the value of the first input box in your component state and set the value of the second input box to the value from the state.

Then when the value of the input box changes, update the state, using the handleChange method, which in turn re-renders the component updating the second input box.

...

constructor(props) {
  super(props)
  this.state = {
    inputText: ''
  }
  this.handleChange = this.handleChange.bind(this)
}

handleChange({ target }) {
  if (target.value.length > 4) {
    this.setState({
      inputText: target.value
    })
  }
}

render () {
  return (
    <div>
      <Card>
        <div>
          <label>Id</label>
          <input type="text" id="getId" onKeyUp={ this.handleChange } />
          <div>
            <label>Name</label>
            <input type="text" id="getName" value={ this.state.inputText } />
          </div>
        </div>
      </Card>
    </div>
  )
}

...

Aren Hovsepyan · Accepted Answer · 2017-10-08 22:34:13Z

You can handle issue with two ways.

First way is to use React refs and DOM.

So in code below I have done two things, I have added ref props to getName input and accessed it from handleChange method by this.refs.inputOfName', as well ase.targetas your DOM input without accessing again bygetElementById`.

handleChange(e) {
    let value = e.target.value;

    if (value.length > 4) {
        this.refs.inputOfName.value = value
    }
}

render() {
    return (
        <div>
            <Card>
                <div>
                    <label>Id</label>
                    <input type="text" id="getId" onKeyUp=
                        {this.handleChange.bind(this)} />
                    <div>
                        <label>Name</label>
                        <input type="text" id="getName" ref="inputOfName" readOnly />
                    </div>
                </div>
            </Card>
        </div>
    );

You can read more about refs here.

Second way is to use states.

I suggest to use states because it's more React "style" approach as well as one of the React advantages, so spend more time learning about state and lifecycle of React.

You can read more about states here.

handleChange(e) {
    let value = e.target.value;

    if (value.length > 4) {
        this.setState({
            name: value
        });
    }
}

render() {
    return (
        <div>
            <Card>
                <div>
                    <label>Id</label>
                    <input type="text" id="getId" onKeyUp=
                        {this.handleChange.bind(this)} />
                    <div>
                        <label>Name</label>
                        <input type="text" id="getName" value={this.state.name} readOnly />
                    </div>
                </div>
            </Card>
        </div>
    );
}

udidu · Accepted Answer · 2017-10-08 22:34:13Z

As already mention, It's not common to user getElementById within react component, think of what will happen if you will have 2 components rendered.

You can use component state to update your elements.

constructor(props, context) {
    super(props, context);

    // This will represent your component state to hold current input value.
    this.state = { value: "" };

    // Do handler bindings in one place and not inside the render
    // function as it will create a new function reference on each render.
    this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
    this.setState({value: e.target.value});
}

render () {
    return (
        <div>
            <Card>
                <div>
                    <label>Id</label>
                    <input type="text" id="getId" onKeyUp={this.handleChange}/>
                    <div>
                        <label>Name</label>
                        <input type="text" value={this.state.value} readOnly/>
                    </div>
                </div>
            </Card>
        </div>
    );
}

Collectives™ on Stack Overflow

react js - how to populate values based on another DOM element value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related