Prepopulate input text with semantic UI react

Question

How can you set a predefined value on a Form.Input or Input component in semantic UI react? I've tried passing defaultValue="someVal" as a prop which works. But that doesn't update the value if props change. I tried passing the prop value="someVal" which prepopulates it but blocks any access to edit that field. All keystrokes are ignored. There must be a way to basically do

and still have it update the value when componentWillReceiveProps is triggered?

Here is the input component I'm using

This is the form which uses the Input below as the control https://react.semantic-ui.com/collections/form https://react.semantic-ui.com/elements/input

I have an AutoSaveInput.jsx which essentially renders the input below with an onChange to automatically save each keystroke ( still need to add a debounce ).

<Label  basic>{this.props.label}</Label>
<Form.Input
                            defaultValue={this.props.defaultValue}
                            disabled={this.props.disabled}
                            name={this.props.name}
                            onChange={this.onChange}
                            error={this.state.isDirty}

                            />

The input above works fine initially. However, when new props come in, this.props.label updates fine, but the Form.Input value does not update at all. Instead it still shows the previous value.

Also if I change this to the below, the values do update with new props, but you can't type in the input itself. The cursor just jumps to the end of the input and doesn't let you type anything else.

<Label  basic>{this.props.label}</Label>
<Form.Input
                            value={this.props.defaultValue}
                            disabled={this.props.disabled}
                            name={this.props.name}
                            onChange={this.onChange}
                            error={this.state.isDirty}

                            />

Also the props are being updated via ReactRouter v4 by clicking a Click where the var is what loads in different form content for editing.

Can you post the component you are using it in? Context would help a lot. Sounds pretty easy though, you should make it a controlled input with the value set to a prop value and an onChange that updates that prop. — Chase DeAnda
– Chase DeAnda, Commented Oct 11, 2017 at 21:18
Have an onChange function. For example, onChange((e) => this.state.data.input_name)) — fungusanthrax
– fungusanthrax, Commented Oct 11, 2017 at 21:18

karc · Accepted Answer · 2017-10-12 01:37:02Z

3

Got this working. I needed to maintain value in the state of my component that rendered the Form.Input and pass value={this.state.value} vs {this.props.value}.

answered Oct 12, 2017 at 1:37

karc

1811 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prepopulate input text with semantic UI react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related