提交后重置输入字段

Question

我有一些问题在我的redux-react应用中处理简单情况：我想在按钮点击异步操作后重置输入文本。

比方说，我们有一个输入文本，在其中放置一个文本，并通过onClick事件传递给调度操作。 此操作联系服务器，服务器响应之后我想重置输入字段。

，我实现了许多解决方案（我使用终极版的thunk）到这个问题，但我不知道他们是哈克的方式来解决这个问题，让我告诉你：

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）使用参考文献（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由商店这样的行动派出管理触发复位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）终极版表格 要完成图片i连接了Redux形式选择做 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; 

希望有帮助。祝你好运！