CODEWITHSUNDEEP
reactjsreduxredux-formsemantic-ui-react
WatsonFungHK
WatsonFungHK

Reputation: 51

How to make react semantic UI TextArea with default value, but still allows user to change the value?

I have tried using defaultValue and value in TextArea but it wont allow user to change the value.

The parent div of the textarea is redux-form Field. And try to pass the value stored in redux state to the 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>
);

Upvotes: 3

Views: 7282

Answers (4)

iamcaleberic
iamcaleberic

Reputation: 933

You can link the value of the Textarea input to that of a value from state such that you can set the default text for the text but also allow for the state to be updated in turn updating the value. You can accomplish this using linkstate.

Also if you already have the date in in your store you can set it up on the ComponentDidMount lifecycle event. to set the value of the linked state value therefore setting a default value.

Example usage from the docs:

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

Upvotes: 0

Jethro
Jethro

Reputation: 1

An alternative way is to use the textarea tag since I was not able to find proper solution

example:

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

or via react-final-form

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

...

Upvotes: 0

Roger Perez
Roger Perez

Reputation: 3129

If you are using Semantic UI react you can use a Form.Field tag You can set a default value and do what you are asking by using

"defaultValue='default text you are trying to display'

You can see a Form.Field Example below. 

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

Note: defaultValue will override your placeholder and the defaultValue will not be removed when the click on textarea. If you want to just display info of what the textarea is for I would use placeholder.

Upvotes: 4

phoenisx
phoenisx

Reputation: 1689

SUI TextArea is base class for Form.TextArea, and both uses the same prop value for setting the default Text Value for the textarea.

Following Code works for me:

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;

Where value={mesg}, sets the default state of textarea (is set).

Upvotes: 4

Related Questions