如何为React Semantic UI TextArea设置默认值并允许用户修改？

看起来你遇到的问题是因为redux-form的Field组件已经接管了表单控件的状态管理，但你在自定义逻辑时没有正确同步redux store的更新，导致TextArea的值无法随用户输入变化。我来帮你拆解原因和解决方案：

问题根源 #

1. redux-form的Field组件会通过input对象向你的自定义组件传递value和onChange——value来自redux store中对应的表单字段，onChange则是用来更新store的函数。
2. 如果你直接在Field上覆盖onChange但没有调用input.onChange，或者手动给TextArea设置value/defaultValue，就会打破redux-form的受控组件机制：用户输入后store没有更新，TextArea的value始终来自旧的store值，自然看起来无法修改。

解决方案 #

你需要把自定义的triggerHoldResponse逻辑和redux-form的状态更新结合起来，而不是覆盖它的onChange。这里有两种简洁的实现方式：

方式1：在自定义renderField组件中合并逻辑

修改renderField，把redux-form的input.onChange和你的自定义函数结合：

// 注意要把conversation.id传进来，或者确保它在当前作用域内
const renderField = ({input, type, meta: { error }, placeholder, conversationId}: any) => {
  const handleChange = (e) => {
    // 第一步：先调用redux-form的onChange更新store
    input.onChange(e);
    // 第二步：执行你的自定义逻辑
    triggerHoldResponse(e.target.value, conversationId);
  };

  return (
    <div>
      <TextArea 
        className={styles.textarea} 
        {...input} 
        onChange={handleChange} // 替换input自带的onChange
        placeholder={placeholder} 
        type={type} 
      />
      <div className={styles.errorSignal}>
        {error}
      </div>
    </div>
  );
};

// 使用Field时传递conversation.id
<Field 
  name="message" 
  component={renderField} 
  placeholder="输入你的消息..."
  conversationId={conversation.id}
/>

方式2：在Field组件中传递自定义onChange并合并

如果你更倾向于在Field层处理逻辑，可以这样写：

<Field 
  name="message" 
  component={renderField} 
  placeholder="输入你的消息..."
  // 自定义onChange，接收事件和input对象
  onChange={(e, input) => {
    input.onChange(e); // 更新redux store
    triggerHoldResponse(e.target.value, conversation.id); // 执行你的逻辑
  }}
/>

// 对应的renderField
const renderField = ({input, type, meta: { error }, placeholder, onChange}: any) => {
  const handleChange = (e) => {
    input.onChange(e);
    // 调用Field传递过来的自定义onChange
    onChange(e, input);
  };

  return (
    <div>
      <TextArea 
        className={styles.textarea} 
        {...input} 
        onChange={handleChange}
        placeholder={placeholder} 
        type={type} 
      />
      <div className={styles.errorSignal}>
        {error}
      </div>
    </div>
  );
};

额外注意事项 #

• 不要手动给TextArea设置value或defaultValue，redux-form会通过input.value自动同步store的值。如果需要设置初始值，应该通过redux-form的initialValues配置或者initialize action来实现。
• 确保你的triggerHoldResponse函数没有阻塞或错误，否则可能也会影响状态更新。

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