提交後重置輸入字段

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; 

希望有幫助。祝你好運！