React 表單的繫結

每個表單元件都用onChange繫結

<form onSubmit={this.onSubmit}>
                <h1>Welcome Join commmit</h1>
                <div className="form-group">
                    <label className="control-label">Username</label>
                    <input
                        type="text"
                        name="username"
                        value={this.state.username}
                        onChange={this.onChange}
                        className={classnames('form-control', { 'is-invalid': errors.name === 'username' })}
                        placeholder="please input username"
                    />
                </div>
      </form>
 

onChange 的操作

onChange =  (e)  =>  { 
        this.setState({
            [e.target.name]: e.target.value
        })
    }

redux-thunk 的使用

actions裡面的actionCrator

export const registerRequest = (paramas) => {
    return dispatch => {
        return axios.post('/api/user',paramas);
    }
}

容器元件裡面mapStateToDispatch（）

import * as useAction from '../'

用bindActionCreators（）封裝 action 方便action的操作

const mapDispatchToProps = (dispatch) => ({
    useAction: bindActionCreators(useAction,dispatch)
})

內容裡面使用的方法

onSubmit = (e) => {
        e.preventDefault()
        this.setState({ isLoading: true })
        this.props.useAction.registerRequest(this.state).then(({ data }) => {
            if (data.code === 0) {
                this.setState({
                    errors: data,
                })
            }
            this.setState({
                isLoading: false
            })
            localStorage.setItem('SYSTEM_USER', JSON.stringify(data))
            this.props.history.push('/');
        })
     }