Question

我尝试使用React-Redux开发登录页面，遇到一些问题。

我想通过AJAX将关于帐户和密码的TextFields发送到服务器，但是当我单击登录按钮时，此登录按钮无法获取TextFields的值。

我不想使用＆＃34; form tag＆＃34;我尽我所能来解决这个问题，但我仍然怀疑我的解决方案，所以我想找到一些关于这个问题的建议。

我的解决方案如下

TextFields将触发一个操作，将登录信息设置为下一个状态。登录按钮只会将这些信息发送到服务器。

以下是代码的一部分。

TextField：

class BaseInputComponent extends React.Component {
    constructor(props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
    }

    _handleChange(e) {
        this.props.onChange({infoType: this.props.dataType, data: e.target.value})
    }

    render() {
        var style = {
            marginBottom: 30
        };

        return (
            <div style={style}>
                <TextField
                    hintText={ this.props.hintText }
                    floatingLabelText={ this.props.floatingLabelText }
                    type={ this.props.type }
                    onChange={ this._handleChange }
                    value={this.props.textField}
                />
            </div>
        );
    }
}

登录页面

class UserPaperComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    handleClickBtn() {
        this.props.actions.userLogin()
    }

    render() {
        var style = {
            padding: 20,
            textAlign: 'center',
        };

        return (
            <Paper style={style} zDepth={5}>
                <UserPaperTitleComponent text={this.props.userPaperText}/>
                <Divider />
                <BaseInputComponent dataType="userAccount" textField={this.props.userInfo.userAccount} onChange={ this.props.actions.setUserInfo } floatingLabelText="Account"/>
                <BaseInputComponent dataType="userPwd" textField={this.props.userInfo.userPwd} onChange={ this.props.actions.setUserInfo }  floatingLabelText="Password" type="password"/>
                <Divider />
                <br />
                <RaisedButton label={this.props.userPaperText} onMouseUp={ this.handleClickBtn } />
            </Paper>
        );
    }
}

在reduce

中

const initialState = {
  userAccount: '',
  userPwd: '',
  userHadLogin: false
};

module.exports = function(state = initialState, action) {
  /* Keep the reducer clean - do not mutate the original state. */
  //let nextState = Object.assign({}, state);

  switch(action.type) {

    case 'SET_USER_INFO': {
      console.log(action.paras)
      let nextState = Object.assign({}, state);
      nextState[action.paras.infoType] = action.paras.data;
      return nextState;
    } break;

    case 'USER_LOGIN': {
      // Modify next state depending on the action and return it
      let nextState = Object.assign({}, state);
      nextState.userHadLogin = true;
      return nextState;
    } break;

    case 'USER_LOGOUT': {
      // Modify next state depending on the action and return it
      let nextState = Object.assign({}, initialState);
      return nextState;
    } break;

    default: {
      /* Return original state if no actions were consumed. */
      return state;
    }
  }
}

Answer 1

尝试将处理程序绑定到＆＃34;这个＆＃34; <RaisedButton label={this.props.userPaperText} onMouseUp={ this.handleClickBtn.bind(this) } />

使用React-Redux开发登录页面

1 个答案: