提交后重置输入字段

Question

我在处理我的 redux-react 应用程序中的一个简单案例时遇到了一些问题：我想在由按钮触发的异步操作后重置输入文本。

假设我们有一个输入文本，您可以在其中放置一个文本，并且它通过 onClick 事件传递给调度操作。此操作联系服务器，在服务器响应后我想重置输入字段。

我已经针对这个问题实施了很多解决方案（我正在使用 redux thunk），但我不确定它们是否是解决问题的 hacky 方法，让我告诉你：

1) 演示组件（输入字段）实现了一个重置方法，该方法作为值传递给 onClick 方法。

export default React.createClass({

  reset: function () {
    this.setState({searchText: ''})
  },

  getInitialState: function () {
    return {
      searchText: ''
    }
  },

  render: function () {
    return (
        <div>
          <TextField
            value={this.state.searchText}
            onChange={e => this.setState({ searchText: e.target.value })}
          />
          <RaisedButton
            onClick={this.props.startSearch.bind(null,
              this.state.searchText,
              this.reset)} // ===> HERE THE RESET FUNCTION IS PASSED
          />
        </div>
    )
  }
})

容器调度动作，然后调用重置方法。

const mapDispatchToProps = (dispatch) => {
  return {
    startSearch: (searchText, reset) => {
      dispatch(actions.startSearch(searchText))
      .then(() => reset())
    }
  }
}

2) 使用 ref (https://facebook.github.io/react/docs/refs-and-the-dom.html)

容器获取对其子项的引用并通过它调用重置

const SearchUserContainer = React.createClass({

  startSearch: (searchText) => {
    dispatch(actions.startSearch(searchText))
    .then(() => this.child.reset())
  },

  render: function () {
    return (
      <SearchUser {...this.props} ref={(child) => { this.child = child; }}/>
    )
  }
})

3) Redux 之道。

searchText 由 store 管理，因此分派的操作会触发一个重置 searchText 值的解析器，容器更新其子项，我们就完成了，好吧……几乎：表示组件是一个受控组件（https://facebook.github.io/react/docs/forms.html#controlled-components），这意味着它将输入文本作为内部状态进行管理，我认为我们必须找到一种方法使两个“状态管理器”共存。

我写这段代码来管理内部状态和来自 redux 的状态，简而言之，演示从 redux 获取初始值，然后在 onChange 事件中更新它，它准备好从 redux 接收更新，感谢componentWillReceiveProps.

export default React.createClass({

  getInitialState: function () {
    return {
      searchText: this.props.searchText ==> REDUX
    }
  },

  componentWillReceiveProps: function (nextProps) {
    this.setState({
      searchText: nextProps.searchText ==> REDUX
    })
  },

  render: function () {
    return (
        <div>
          <TextField
            value={this.state.searchText}
            onChange={e => this.setState({ searchText: e.target.value })}
          />
          <RaisedButton
            onClick={this.props.startSearch.bind(null, this.state.searchText)}
          />
        </div>
    )
  }
})

4) Redux-Form 为了完成图片我 link redux-form 选项来做到这一点 http://redux-form.com/6.5.0/docs/faq/HowToClear.md/

您如何看待这些想法？谢谢。

Answer 1

走 Redux 的路，除了一路走下去：从你的组件中完全删除内部状态，让 Redux 处理它（也可以让你的组件成为一个纯功能组件）：

组件：

import { connect } from 'redux';
import { actions } from 'actionCreators';

const ControlledInputComponent = (props) => {
  return (
    <div>
      <TextField
        value={this.props.searchText}
        onChange={e => this.props.setSearchText(e.target.value)}
      />
      <RaisedButton
        onClick={this.props.startSearch}
      />
    </div>
  );
};

const mapStateToProps = (state) => {
  return { searchText: state.searchText  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setSearchText: (txt) => { dispatch(actions.setSearchText(txt)); },
    startSearch: () => { dispatch(actions.search()); }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ControlledInputComponent);

动作创作者：

export const actions = {
  setSearchText: (txt) => ({ type: 'setText', data: txt }),

  //here's where the thunk comes in
  //make sure you have redux-thunk and add it as a middleware when setting up the store, etc.

  search: () => {
    return (dispatch) => {
      //use fetch or whatever to run your search (this is a simplified example)
      fetch(/* your url here */).then(() => {
        //presumably a success condition

        //handle the search results appropriately...

        //dispatch again to reset the search text
        dispatch(actions.setSearchText(null);
      });
    };
  }
};

减速器：

const reducer = (state = { searchText: null }, action) => {
  if (!action || !action.type) return state;
  switch (action.type) {

    //you should really define 'setText' as a constant somewhere
    //so you can import it and not have to worry about typos later
    case 'setText':
      return Object.assign({}, state, { searchText: action.data });

    default:
      return state;
  }
};

export default reducer;

希望对您有所帮助。祝你好运！

提交后重置输入字段

Reset an input field after submission

javascript

forms

reactjs

redux

redux-form