无法使用 redux-form 获取 TextInput 的值答案

【问题标题】：can't get value of TextInput with redux-form无法使用 redux-form 获取 TextInput 的值
【发布时间】：2018-04-06 16:35:05
【问题描述】：

我正在使用 React native，我想使用 Redux-Form 在 this 文章之后从 TextInput 提交文本，如果我输入文本，它会按预期工作，但是当我将TextInput 的value 属性设置为某个字符串时，提交后我得到一个空对象。

它只在我输入文本时有效，但在我将其设置为某个值时无效。

这是我使用的TextInput的一部分：

const titleField = (input, inputProps) => {

var myval = 'test';
return (
    <View style={{flexDirection: 'row'}}>
        <Label style={{padding: 5}}>Task Title:</Label>
        <TextInput
            style={styles.inputStyle}
            {...inputProps}
            onChangeText={input.onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            value={myval} // get {} when checking the log input after submitting
        />
    </View>
  )
}

希望你能帮助我，谢谢。

【问题讨论】：

标签： javascript react-native redux redux-form

【解决方案1】：

我通过将功能组件更改为类组件来解决这个问题，并使用componentDidUpdate()生命周期方法来检查道具在传递给组件时是否已更改并调用this.props.input.onChange(this.props.value);，因为input可以使用值调用同样，因此 this.props.value 也通过了。

来自 Redux 表单 API（字段组件）：

input.onChange(eventOrValue) 更改表单字段时调用的函数。它期望接收 React SyntheticEvent 或字段的新值。

这是整个类组件：

class CounterField extends React.Component {
  constructor(props){
      super(props);
  }

  componentDidUpdate(){
    this.props.input.onChange(this.props.value);
  }

  render(){
    return (
        <View style={{paddingTop: 20, width: 30}}>
            <TextInput
                name='title'
                onChangeText={this.props.input.onChange}
                editable={false}
                value={this.props.value}
                style={{fontSize: 20, textAlign: 'center', fontWeight: 'bold'}}
                placeholder={'0'}
            />
        </View>

    )
  }
}

【讨论】：