Reactjs react js-如何基于另一个DOM元素值填充值

我有两个输入框。基于key up事件上的一个input1框值，我正在填充另一个input2框值。目前，我正在使用document.getElementByID选项检索元素id以填充值。在react js中推荐吗？请建议。我想在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>
);

---

您可以在组件状态中存储第一个输入框的值，并将第二个输入框的值设置为该状态的值

然后，当输入框的值发生更改时，使用handleChange方法更新状态，这反过来会重新呈现更新第二个输入框的组件

...

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>
  )
}

...

---

你们可以用两种方法来处理这个问题

第一种方法是使用React refs和DOM。 因此，在下面的代码中，我做了两件事，我向getName输入添加了ref props，并通过这个.refs.inputOfName'从handleChange方法访问它，以及将ase.target作为DOM输入，而不通过GetElementById`再次访问它

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>
    );

您可以阅读有关参考文献的更多信息

第二种方法是使用状态。 我建议使用状态，因为它更像React风格的方法，也是React的优点之一，所以请花更多的时间学习React的状态和生命周期

你可以阅读更多关于州的信息

---

如前所述，用户getElementById在react组件中并不常见，请考虑一下如果呈现两个组件会发生什么

可以使用组件状态更新元素

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>
    );
}

---

你能重构你的代码使之更具可读性吗：我可以想出另外两种更合适的方法。一种是在输入上使用REF而不是ID，这可以防止同一React组件的多个实例出现问题，通常是首选。另一种是，在更新第一个输入框时，将输入框的新值存储在状态中并实时更新。然后，在呈现第二个时，可以使用value={this.state.firstInputValue}

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>
    );
}