4

状態レベル配列を持つクラスがあるとしましょう

ElementsClass = React.createClass({
    getInitialState: function() {
      return {
          elements: []
      }
    },
    addElement: function() {
        var element = {
            name: ""
        };
    },
    render() {
        return (
            {this.state.elements.map(function (element, i) {
                    return <input value={element.name} />
                }
            )}
        )
}

要素配列に動的に追加して、新しい入力フィールドを表示できるという考えです。

入力フィールドの値を変更し、要素配列の正しい要素に自動的に反映できるようにデータをバインドするにはどうすればよいですか?

4

3 に答える 3

2

入力を状態配列と動的に同期するには、 react-catalystパッケージlinkStateから呼び出される someting を使用できます。npm でインストールしたら、次の方法で使用できます。

 //need to import
import Catalyst from 'react-catalyst'; 

ElementsClass = React.createClass({
    // mixin the linkedstate component
    mixins : [Catalyst.LinkedStateMixin],       

    getInitialState: function() {
      return {
          elements: []
      }
    },
    addElement: function() {
        var element = {
            name: ""
        };

        //add to elements array
        this.state.elements.push(element);

        //let react know to rerender necessary parts
        this.setState({
            elements : this.state.elements
        });
    },
    render() {
        return (
            {this.state.elements.map(function (element, i) {
                    //use the linkState method
                    return <input valueLink={this.linkState('elements.'+i+'.name')} />
                }
            )}
        )
}

パッケージが必要な理由react-catalystは、ネイティブに ReactvalueLinkが最上位の状態項目のみをリンクするためelementsです。明らかに、これは特に有用ではありませんが、ありがたいことに、解決するのはかなり簡単な問題です。

注: 要素入力のような反復項目の場合、一意のキーを提供する必要があります。次のようなもの (より具体的に変更する必要がある場合があります):

{this.state.elements.map(function (element, i) {
        //use the linkState method
        return <input valueLink={this.linkState('elements.'+i+'.name')} key={'elinput' + i} />
    }
)}

これはアプリに外向きの影響はありません。主に、要素を内部的にターゲットに反応させるのに役立ちます。

于 2016-03-01T19:03:39.663 に答える
0

これらの状況は、カスタム リンク パッケージで簡単に処理できます。

React の状態とフォーム、パート 3: 複雑な状態の処理

import Link from 'valuelink';

// linked inputs will be deprecated, thus we need to use custom wrappers 
import { Input } from 'valueLink/tags.jsx'

const ElementsClass = React.createClass({
    getInitialState: function() {
      return {
          elements: []
      }
    },

    render() {
        // Take link to the element
        const elementsLink = Link.state( this, 'elements' );

        return (
            <div>
                { elementsLink.map( ( elementLink, i ) => (
                     <Input key={ i } valueLink={ elementLink.at( 'name' ) } />  
                ))}

                <button onClick={ elementsLink.push({ name : '' })}>
                    Add Elements
                </button>
            </div>
        );
    }
});
于 2016-06-02T18:16:32.560 に答える