Javascript React Native:Redux-如何通过事件正确更新TextInput并更新Redux状态？

我正在使用Redux+React Native

我的行动计划是：

export function updateUsername(eventValue) {
  return {
    type: UPDATE_USERNAME,
    username: eventValue
  }
}

export function updatePassword(eventValue) {
  return {
    type: UPDATE_PASSWORD,
    password: eventValue
  }
}

我的减速机是：

//reason for leaving userInfo empty is so it doesn't interfere with TextInput placeholder

const initialState = {
  userInfo:{
  }
}

function inputReducer(state = initialState, action) {
  switch(action.type) {

    case UPDATE_USERNAME:
      return {
        ...state,
        username: action.username
      }

    case UPDATE_PASSWORD:
      return {
        ...state,
        password: action.password
      }

   default:
     return state

  }
}

父组件呈现元素

：

//userInfo is the object from the inputReducer

  <CustomInput
    placeholder='Username'
    userProp={userInfo.username}
    actions={this.props.actions}
  />

  <CustomInput
    placeholder='Password'
    userProp={userInfo.password}
    actions={this.props.actions}
  />

//userInfo是来自inputReducer的对象

而

动作调用：

  _chooseInput(event){
    switch(this.props.placeholder){
      case "Username":
        this.props.actions.updateUsername(event.target.value)
        break
      case "Password":
        this.props.actions.updatePassword(event.target.value)
        break
      default:
        break
    }
  }

  render() {
    var pr = this.props;

    return (
      <TextInput
        style={{fontWeight: 'bold', height: 20.5, color: '#999999'}}
        palceholderStyle={{fontWeight: 'bold'}}
        placeholderTextColor='#999999'
        placeholder={pr.placeholder}
        onChange={this._chooseInput.bind(this)}
        value={pr.userProp}
      />
    );
  }

\u选择输入（事件）{
开关（this.props.placeholder）{
案例“用户名”：
this.props.actions.updateUsername（event.target.value）
打破
案例“密码”：
this.props.actions.updatePassword（event.target.value）
打破
违约：
打破
}
}
render（）{
var pr=this.props；
返回(
);
}

一旦输入了文本，它将更新为

未定义的

。当我输入测试字符串

test

代替

event.target.value

时，userInfo状态正确更新

以下是日志（如图所示，

用户名：未定义）：


逻辑似乎都有道理，但为什么它会更新为未定义的？我错过什么了吗

提前谢谢你
 由于使用
onChange
从输入检索文本，因此需要从
event.nativeEvent
对象获取。它隐藏在
文本
标识符下

在这种情况下：

_chooseInput(event) {
  const { nativeEvent: { text } } = event;
  switch(this.props.placeholder){
    case "Username":
      this.props.actions.updateUsername(text)
      break
    case "Password":
      this.props.actions.updatePassword(text)
      break
    default:
      break
  }
}

另一种方法是使用
onChangeText
将字符串传递给处理程序函数，而不是
事件。因此，您将最终进入：

_chooseInput(text) {
  switch(this.props.placeholder){
    case "Username":
      this.props.actions.updateUsername(text)
      break
    case "Password":
      this.props.actions.updatePassword(text)
      break
    default:
      break
  }
}

// mark that You have a type in "palceholderStyle", should be "placeholderStyle"
render() {
  var pr = this.props;

  return (
    <TextInput
      style={{fontWeight: 'bold', height: 20.5, color: '#999999'}}
      placeholderStyle={{fontWeight: 'bold'}}
      placeholderTextColor='#999999'
      placeholder={pr.placeholder}
      onChangeText ={this._chooseInput.bind(this)}
      value={pr.userProp}
    />
  );
}

\u选择输入（文本）{
开关（this.props.placeholder）{
案例“用户名”：
this.props.actions.updateUsername（文本）
打破
案例“密码”：
this.props.actions.updatePassword（文本）
打破
违约：
打破
}
}
//标记您在“palceholderStyle”中有一个类型，应该是“placeholderStyle”
render（）{
var pr=this.props；
返回(
);
}

要了解更多信息，请查看：




当您在返回操作之前console.log eventValue的值时，数据是否也正确或未定义？