React Native使用Redux-Form时无法获取TextInput预设值的问题

嘿，我之前也碰到过这个坑！问题出在Redux-Form的状态管理逻辑上——你直接给TextInput硬塞value的方式，绕开了Redux-Form对字段状态的管控，导致提交时它根本不知道你设置的这个值。

核心原因 #

Redux-Form的字段是通过input对象来同步状态的：它会把字段值存在自己的Redux store里，通过input.value绑定到UI，通过input.onChange更新store。如果你直接给TextInput设置value={myval}，只是修改了UI显示，并没有把这个值同步到Redux-Form的store中，提交时自然拿不到。

两种正确的解决方案 #

1. 设置初始值（组件加载时就显示固定值）

如果是要给字段设置初始值，直接在reduxForm的配置里用initialValues就好，Redux-Form会自动把值同步到input.value，UI和状态会保持一致：

import { reduxForm, Field } from 'redux-form';

const MyForm = (props) => {
  const { handleSubmit } = props;

  const titleField = (input, inputProps) => {
    return (
      <View style={{flexDirection: 'row'}}>
        <Label style={/* 你的样式 */}>标题</Label>
        <TextInput
          {...input}  // 关键：自动绑定value和onChange
          style={/* 你的样式 */}
          placeholder="输入标题"
        />
      </View>
    );
  };

  return (
    <View>
      <Field name="title" component={titleField} />
      <Button 
        title="提交" 
        onPress={handleSubmit(values => console.log('提交的值：', values))} 
      />
    </View>
  );
};

// 在这里配置初始值
export default reduxForm({
  form: 'mySubmitForm',
  initialValues: { title: 'test' }  // 初始值会自动同步到title字段
})(MyForm);

2. 动态修改字段值（比如按钮触发设置）

如果是要在组件运行时动态修改字段值，要用Redux-Form提供的change action creator，把值同步到store：

import { reduxForm, Field, change } from 'redux-form';
import { connect } from 'react-redux';

const MyForm = (props) => {
  const { handleSubmit, setTitleToTest } = props;

  // 点击按钮时设置值
  const handleSetValue = () => {
    setTitleToTest('test');
  };

  const titleField = (input, inputProps) => {
    return (
      <View style={{flexDirection: 'row'}}>
        <Label style={/* 你的样式 */}>标题</Label>
        <TextInput
          {...input}
          style={/* 你的样式 */}
          placeholder="输入标题"
        />
      </View>
    );
  };

  return (
    <View>
      <Field name="title" component={titleField} />
      <Button title="设置测试值" onPress={handleSetValue} />
      <Button 
        title="提交" 
        onPress={handleSubmit(values => console.log('提交的值：', values))} 
      />
    </View>
  );
};

// 把修改字段的action映射到props
const mapDispatchToProps = dispatch => ({
  setTitleToTest: (value) => dispatch(change('mySubmitForm', 'title', value))
});

export default connect(null, mapDispatchToProps)(
  reduxForm({ form: 'mySubmitForm' })(MyForm)
);

这样不管是初始值还是动态设置的值，都会被Redux-Form的状态管理覆盖，提交时就能正确获取到title字段的值啦～

内容的提问来源于stack exchange，提问作者zb22