1

シナリオ: オートコンプリート

  1. HTMLinput要素の値は redux-state に転送されます。
  2. この redux-state は、トラッカーで注入されるクエリを定義します (以下に示すように)。
  3. クエリの結果は auto-complete-options として表示されます。

input問題:値の変更時にコンポーネントがリロードされない

input値が変更された場合、コンポーネントを再ロードするにはどうすればよいですか?

コードスニペット

const AutoComplete = (props) => {
    let handleChange = (event) => {
        props.setSearchQuery(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                onChange={(event) => handleChange(event)}
            />
        </div>
    );
};

export default connect(
    (state) => ({
        searchQuery: selectors.getSearchQuery(state)
    }),
    (dispatch) => ({
        setSearchQuery: (queryString) => dispatch(actions.setSearchQuery(queryString))
    })
)(
    composeWithTracker(
        (props, onDate) => {
            const searchResults = props.searchFunction(props.searchQuery);
            onDate(null, {searchResults});
        }
    )(AutoComplete)
);
4

1 に答える 1

0

アクションをディスパッチするためだと思います。ただし、AutoComplete の props は変更されないため、コンポーネントはレンダリングされません。

const AutoComplete = (props) => {
    let handleChange = (event) => {
        props.setSearchQuery(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                onChange={(event) => handleChange(event)}
            />
            <span>{this.props.searchQuery}</span>
        </div>
    );
};

searchQueryコンポーネントで小道具が使用されていることを確認してください

于 2016-06-16T03:05:02.373 に答える