如何使语义 UI TextArea 具有默认值，但仍允许用户更改值？答案

【问题标题】：How to make react semantic UI TextArea with default value, but still allows user to change the value?如何使语义 UI TextArea 具有默认值，但仍允许用户更改值？
【发布时间】：2018-01-28 11:27:27
【问题描述】：

我尝试在 TextArea 中使用 defaultValue 和 value，但它不允许用户更改值。

textarea 的父 div 是 redux-form 字段。并尝试将redux状态中存储的值传递给textarea

     <Field
        name="message"
        component={renderField}
        ...
        onChange={ (e: any) => 
          triggerHoldResponse(e.target.value, conversation.id)
        }
      />

const renderField = ({input, type, meta: { error }}: any) => (
  <div>
    <TextArea 
      className={styles.textarea}
      {...input}
      placeholder={placeholder}
      type={type}
    />
    <div className={styles.errorSignal}>
      {error}
    </div> 
  </div>
);

【问题讨论】：

标签： reactjs redux redux-form semantic-ui-react

【解决方案1】：

SUI TextArea 是Form.TextArea 的基类，两者都使用相同的道具value 来设置textarea 的默认文本值。

以下代码对我有用：

import React from 'react'
import { Form, Input, TextArea, Button } from 'semantic-ui-react'

const FormTextAreaExample = () => (
  <Form
    <Form.TextArea
      autoHeight
      onChange={this.handleMessageChange}
      label="Message"
      value={mesg}
      placeholder="Enter your request message"
      rows={3}
    />

  </Form>
)

export default FormTextAreaExample;

其中value={mesg}，设置textarea的默认状态（已设置）。

【讨论】：

这会阻止我更改默认值

【解决方案2】：

如果您使用语义 UI 反应，您可以使用 Form.Field 标记您可以设置默认值并使用

执行您所要求的操作

"defaultValue='您尝试显示的默认文本'

您可以在下面看到一个 Form.Field 示例。

<Form>

<Form.Field
     name="description"
     required control={TextArea} 
     width={8} 
     onChange={this.handleChange} 
     label="Event Description" 
     defaultValue="Default text..." 
     type="text"  
     placeholder="Describe your event!"/>
</Form>

注意：defaultValue 将覆盖您的占位符，并且在单击 textarea 时不会删除 defaultValue。如果您只想显示 textarea 的用途信息，我会使用占位符。

【讨论】：

不错的答案！鉴于当前 Semantic UI React TextArea 没有 defaultValue 属性

【解决方案3】：

您可以将Textarea 输入的值链接到来自state 的值的值，这样您就可以为文本设置默认文本，但也允许依次更新状态来更新值。您可以使用linkstate 完成此操作。

此外，如果您的商店中已有日期，您可以在 ComponentDidMount 生命周期事件中设置它。设置linked state value 的值，因此设置一个默认值。

文档中的示例用法：

import linkState from 'linkstate';

class Foo extends Component {
  state = {
    text: ''
  };
  render(props, state) {
    return (
      <input
        value={state.text}
        onInput={linkState(this, 'text')}
      />
    );
  }
}

https://github.com/developit/linkstate

【讨论】：