React中setState无法更新输入框值？Material-UI+react-input-mask场景求解

先梳理你代码里的核心问题：

• 字段名混乱：Field的name是ename，但renderField绑定的是this.state.edate，handleBlur又更新ename，状态不同步导致输入框不更新
• 用了redux-form的Field组件，表单值由redux-form统一管理，直接调用setState无法同步到Field的受控输入框

下面是修正后的完整方案：

1. 统一字段名 #

先把所有相关字段名统一为edate，同时在组件state里初始化该字段：

constructor(props) {
  super(props);
  this.state= {
    api_access: true,
    currency: "", 
    sku: "",
    edate: "" // 初始化字段
  }
}

2. 用redux-form的change方法更新字段 #

因为Field是redux-form的受控组件，必须通过它提供的change action来修改字段值。先注入change方法：

// 导入依赖
import { connect } from 'react-redux';
import { change } from 'redux-form';

// 注入change方法，替换成你实际的表单名称
const mapDispatchToProps = {
  updateField: change('你的表单名称')
};

export default connect(null, mapDispatchToProps)(TemplateForm);

3. 调整handleBlur逻辑 #

修改handleBlur，用updateField更新redux-form的字段值，而非直接setState：

handleBlur = (event) => {
  const { value, name } = event.target;
  const valueParts = value.split("/");
  // 处理单数字月份补零，同时避免空值报错
  if (valueParts[0]?.length === 1) {
    valueParts[0] = "0" + valueParts[0];
  }
  const formattedValue = valueParts.join("/");
  // 更新redux-form中的字段值
  this.props.updateField(name, formattedValue);
}

4. 修正renderField组件 #

让InputMask从Field的input对象获取值，而非组件state，同时把onBlur绑定到TextField上：

renderField=({input, label, meta:{touched, error}})=> (
  <InputMask 
    mask="99/9999"
    value={input.value} // 从redux-form的input获取值
    name={input.name} // 复用input的name，避免硬编码
    type="tel"
    required
    {...input}
  >
    {(inputProps) => 
      <TextField
        {...inputProps}
        label={label}
        fullWidth
        onBlur={this.handleBlur} // 绑定失焦事件
      />}
  </InputMask>
)

5. 修正Field组件调用 #

去掉Field上的onBlur，确保name和统一后的字段名一致：

<Field id="edate" name="edate" component={this.renderField} />

这样修改后，用户输入1/2022并失焦时，输入框会自动显示01/2022，值也能正常同步到表单状态中。

如果你的表单没有使用redux-form（只是普通受控组件），那只需确保InputMask的value绑定组件state，onChange同步更新state，handleBlur更新state后输入框会自动重新渲染显示格式化后的值即可。

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