0

これは初心者の React.js / ES2015 の質問です。

本の名前のリストを表示する HTML があります。

class BookList extends React.Component
{
    render()
    {
        return (
            <div>
                {this.state.books.map((book) =>
                {
                    return (                        
                        <TextField
                            defaultValue={book.name}
                            key={book.name}
                            onEnterKeyDown={this.onBookNameChange}
                            ...

ユーザーが名前を編集して Enter キーを押すと、クラスのメソッドを呼び出して、本が存在するかどうかを確認し、ストアを更新します。

class BookList extends React.Component
{
    onBookNameChange(event)
    {
        const newBookName = event.target.value;
        if (this.doesBookExistElseShowMessage(newBookName))
            return;
        const oldName = this.defaultValue;
        const oldBooks = Store.getState().books;
        const newBooks = Helper.EditValueInArray(oldBooks, 'name', oldName, newBookName);
        Actions.updateBooks(newBooks);
    }

問題は次のとおりです。このメソッドで、クラス( this.doesBookExistElseShowMessage ) と呼び出し元オブジェクト( this.defaultValue ) の両方にアクセスするにはどうすればよいですか?

これは呼び出しオブジェクト (現在の TextField) であるか、クラス コンストラクターでこれをクラスにバインドできます。

this.onBookNameChange = this.onBookNameChange.bind(this);

しかし、その後 TextField へのアクセスを失います。メソッドで両方のオブジェクトへの参照を取得する方法がわかりません。

4

2 に答える 2

2

インスタンスにバインドし、event.targetまたはevent.currentTargetを使用して TextField にアクセスします。これは、こちらのドキュメントに示されています。

実際、明示的にバインドする必要がないように、React を接続する標準的な方法があると思います (そのほうがよいでしょう。バインドは面倒です) onChange={this.onBookNameChange}。

ドキュメントの例は次のとおりです。

getInitialState: function() {
  return {value: 'Hello!'};
},
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} />;
}

とhandleChangeの使用に注意してください。thisevent.target

targetcurrentTargetハンドラーがinput type="text"他の要素を含むことができない要素 ( など) にバインドされているかどうかは問題ではありませんが、次のことができる要素については問題になる可能性currentTargetがありthisます。別の用途で使用thisしていました）。targetイベントが発生した要素であり、子孫要素にすることができます。divに が含まれていると考えてください。spanあなたが に夢中clickになっていて、誰かがdivをクリックするとspan、targetspancurrentTargetdiv

したがって、thisから何かに置き換える場合はevent、currentTargetに相当するものを取得するために到達するデフォルトのものになりますthis。target委任には本当に便利です。

于 2015-11-10T09:11:36.833 に答える
1

複数の値を

onEnterKeyDown={this.onBookNameChange}

このように見えるかもしれません

onEnterKeyDown={this.onBookNameChange.bind(this, book.name}

関数では、次のようになります。

onBookNameChange(name, ev) {
  console.log(this);
  console.log(ev);
  console.log("name: " + name);
}
于 2015-11-10T09:12:46.773 に答える