Question

我尝试在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>
);

Answer 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（已设置）。

Answer 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。如果您只想显示文本区域的信息，则可以使用占位符。

Answer 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

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

3 个答案: