javascript - React.js: 1 つの onChange ハンドラーでさまざまな入力を識別する

Question

これにアプローチする正しい方法は何ですか?

var Hello = React.createClass({
getInitialState: function() {
    return {total: 0, input1:0, input2:0};
},
render: function() {
    return (
        <div>{this.state.total}<br/>
            <input type="text" value={this.state.input1} onChange={this.handleChange} />
            <input type="text" value={this.state.input2} onChange={this.handleChange} />
        </div>
    );
},
handleChange: function(e){
    this.setState({ ??? : e.target.value});
    t = this.state.input1 + this.state.input2;
    this.setState({total: t});
}
});

React.renderComponent(<Hello />, document.getElementById('content'));

もちろん、別々の handleChange 関数を作成してそれぞれの異なる入力を処理することもできますが、それはあまり良い方法ではありません。同様に、個々の入力用にコンポーネントを作成することもできますが、このようにする方法があるかどうかを確認したかったのです。

score 174 · Accepted Answer

name入力を識別するために、input要素のような標準の HTML 属性に固執することをお勧めします。また、「合計」を状態に別の値として保持する必要はありません。これは、状態に他の値を追加することで構成できるためです。

var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            <div>{total}<br/>
                <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
                <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
            </div>
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(<Hello />, document.getElementById('content'));

score 107 · Accepted Answer

メソッドを使用して、.bindメソッドへのパラメータを事前に構築できますhandleChange。次のようになります。

  var Hello = React.createClass({
    getInitialState: function() {
        return {input1:0, 
                input2:0};
    },
    render: function() {
      var total = this.state.input1 + this.state.input2;
      return (
        <div>{total}<br/>
          <input type="text" value={this.state.input1} 
                             onChange={this.handleChange.bind(this, 'input1')} />
          <input type="text" value={this.state.input2} 
                             onChange={this.handleChange.bind(this, 'input2')} />
        </div>
      );
    },
    handleChange: function (name, e) {
      var change = {};
      change[name] = e.target.value;
      this.setState(change);
    }
  });

  React.renderComponent(<Hello />, document.getElementById('content'));

(total推奨されることなので、レンダリング時に計算されるようにもしました。)

score 12 · Accepted Answer

非推奨のソリューション

valueLink/checkedLink一部のユーザーを混乱させるため、コアの React から廃止されました。最近のバージョンの React を使用している場合、この回答は機能しません。ただし、気に入った場合は、独自のInputコンポーネントを作成して簡単にエミュレートできます

古い回答内容:

達成したいことは、React の双方向データバインディングヘルパーを使用して、はるかに簡単に達成できます。

var Hello = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },

    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
            <div>{total}<br/>
                <input type="text" valueLink={this.linkState('input1')} />;
                <input type="text" valueLink={this.linkState('input2')} />;
            </div>
        );
    }

});

React.renderComponent(<Hello />, document.getElementById('content'));

簡単でしょ？

http://facebook.github.io/react/docs/two-way-binding-helpers.html

独自の mixin を実装することもできます

score 7 · Accepted Answer

次のようにすることもできます。

...
constructor() {
    super();
    this.state = { input1: 0, input2: 0 };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(input, value) {
    this.setState({
        [input]: value
    })
}

render() {
    const total = this.state.input1 + this.state.input2;
    return (
        <div>
            {total}<br />
            <input type="text" onChange={e => this.handleChange('input1', e.target.value)} />
            <input type="text" onChange={e => this.handleChange('input2', e.target.value)} />
        </div>
    )
}

score 5 · Accepted Answer

機能コンポーネントの例をお探しの方は、

import React, { useState } from "react";

export default function Exapmle() {

const [userState, setUserState] = useState({
  firstName: "",
  lastName: ""
})

const handleChange = (e)=>{
   const value = e.target.value;
   setUserState({
    ...userState,
    [e.target.name]: value
   });
}

return (
  <form>

    <label>
      First name
      <input type="text" name="firstName" value={userState.firstName}
        onChange={handleChange}
      />
    </label>

    <label>
      Last name
      <input type="text" name="lastName" value={userState.lastName}
        onChange={handleChange}
      />
    </label>

  </form>
 );
}

score 4 · Accepted Answer

と呼ばれる特別なReact属性を使用して、の関数を使用してイベントref内の実際の DOM ノードと一致させることができます。onChangeReactgetDOMNode()

handleClick: function(event) {
  if (event.target === this.refs.prev.getDOMNode()) {
    ...
  }
}

render: function() {
  ...
  <button ref="prev" onClick={this.handleClick}>Previous question</button>
  <button ref="next" onClick={this.handleClick}>Next question</button>
  ...
}

score 0 · Accepted Answer

単一のの値を管理するinput個別のコンポーネントを作成することで、各子の値を追跡できます。たとえば、次のようになります。InputFieldinputInputField

var InputField = React.createClass({
  getInitialState: function () {
    return({text: this.props.text})
  },
  onChangeHandler: function (event) {
     this.setState({text: event.target.value})
  }, 
  render: function () {
    return (<input onChange={this.onChangeHandler} value={this.state.text} />)
  }
})

これで、各子コンポーネントを監視するために親の状態で個別の値を作成することなくinput、このコンポーネントの個別のインスタンス内で各値を追跡できます。InputField

score 0 · Accepted Answer

@VigrilDisgr4ce

マルチフィールドフォームに関しては、React の重要な機能であるコンポーネントを使用するのが理にかなっています。

私のプロジェクトでは、TextField コンポーネントを作成します。これは、少なくとも value prop を受け取り、入力テキストフィールドの一般的な動作を処理します。このようにして、値の状態を更新するときにフィールド名を追跡することを心配する必要はありません。

[...]

handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  var value = this.state.value;
  return <input type="text" value={value} onChange={this.handleChange} />;
}

[...]

score 0 · Accepted Answer

状態オブジェクト

const [values, setValues] = useState({
    email: "",
    password: "",
  });

状態を変更する関数

const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
 };

「name」を使用した入力の変更時に上記の関数を呼び出す

<input 
onChange={handleChange("email")} 
value={email}
className="form-control"
type="email"
       />

javascript - React.js: 1 つの onChange ハンドラーでさまざまな入力を識別する

13 に答える 13

非推奨のソリューション

古い回答内容:

Related

Reference