react js - 別のDOM要素値に基づいて値を設定する方法

Question

2つの入力ボックスがあります。 1つの入力（1）ボックス値（キーアップイベントの場合）に基づいて、別の入力（2）ボックス値を入力しています。現在、私はdocument.getElementByIDオプションを使用して要素IDを取得し、値を入力しています。それは反応のjsでお勧めですか？ plsが提案する。反応するjsの中でこのより良い方法を見つけるのが好きです。

Answer 1

問題は2通りの方法で処理できます。

1. 第1の方法は、React refsおよびDOMを使用することです。コード中のSO

私は二つのことを行っているの下に、私はgetName入力にref小道具を追加し、this.refs.inputOfName', as well as e.target as your DOM input without accessing again by getElementById`によってhandleChange方法からそれをアクセスしてきました。

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

詳細については、hereを参照してください。

2. 第2の方法は状態を使用することです。

Reactの「スタイル」アプローチとReactの利点の1つであるため、状態を使用することをお勧めします。そのため、Reactの状態とライフサイクルについてより多くの時間を学習してください。

詳細は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> 
    ); 
} 

Answer 2

最初の入力ボックスの値をコンポーネントの状態に保存し、2番目の入力ボックスの値を状態の値に設定できます。入力ボックスの値が変化するが、今度は第二の入力ボックスを更新するコンポーネントを再描画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> 
) 
} 

... 

Answer 3

すでにとして言及し、それがユーザーgetElementByIdに共通ではありません内のあなたは2つのコンポーネントがレンダリングされます場合はどうなるかを考え、コンポーネントを反応させます。

コンポーネントの状態を使用して要素を更新できます。

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