redux 如何使用默认值对语义UI TextArea作出React,但仍允许用户更改该值?

ruyhziif  于 2023-01-26  发布在  React
关注(0)|答案(4)|浏览(217)

我已经尝试在TextArea中使用defaultValue和value,但它不允许用户更改值。
textarea的父div为redux-form Field,尝试将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>
);
fzwojiic

fzwojiic1#

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的默认状态(已设置)。*
xiozqbni

xiozqbni2#

如果使用的是语义UIReact,则可以使用Form.Field标记。可以设置默认值并使用以下命令执行操作

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

您可以看到下面的窗体.字段示例。

<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>

注意:默认值将覆盖您的占位符,并且在单击文本区域时不会删除默认值。如果您只想显示文本区域的信息,我将使用占位符。

7fhtutme

7fhtutme3#

你可以将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

eeq64g8w

eeq64g8w4#

另一种方法是使用textarea标记,因为我无法找到合适的解决方案
示例:

<label className="wps-label">Message</label>
<textarea 
    name="message" 
    placeholder='Your message'
    onChange={(e)=> setMessage(e.target.value)}
>
    {message}
</textarea>

<Form.Checkbox 
    name='show_tooltip' 
    label='Show popup or tooltip when hovering over the spoiler' 
    value='yes' 
    onChange={onChange} 
    defaultChecked={data?.show_tooltip}
/>

或通过React终态

<Form
initialValues={{ 
  title: modalView === 'add' ? '' : data?.title?.rendered, 
  content: modalView === 'add' ? '' : data?.content?.rendered
}}

...

相关问题