Ad

Reflux State Update Not Showing Change Of DefaultValue Of Textarea?

- 1 answer

I'm using Reflux for a forum, and I'm trying to make it so the user can select a category to write in and then fill out a template.

template

For this, I have a setCategory function for onChange for the dropdown menu, which sets the state and therefore rerenders the form.

<Categories onChange={this.setCategory} value={this.state.category} />
// where setCategory is a function which sets the state
// to the selected category.

The form is written like this:

<textarea id='content' defaultValue={this.placeholder()}></textarea>

Where placeholder is a function which returns the data that should be inserted into the textarea:

placeholder: function() {
    if (this.state.category == 'ban-appeals'){
        return ('text here...');
    } // ...
}

However, the issue I'm running into is: when the textarea is rerendered, the text inside the box is not changed from the text it starts with initially. I'd like it to empty the box and set in the text depending on the category, but instead the box doesn't change from the "placeholder" text that is initially given to it.

So, is there a way to update the defaultValue of a textarea when changing state of a page?.


My best guess is that defaultValue is only taken into account when the textarea box is first being created - when we change states, therefore, perhaps the box thinks it's already 'initialized' and thus doesn't update the value, since it's only the default value which would only be set when the box is initialized?

I tried changing the defaultValue attribute to plain value (as in <textarea value={this.placeholder()}>...), but that gives me an error from javascript:

Warning: Failed propType: You provided a `value` prop to a form field without an `onChange` handler. 
This will render a read-only field. If the field should be mutable use `defaultValue`. 
Otherwise, set either `onChange` or `readOnly`. Check the render method of `exports`.

And, furthermore, the box is not editable when I select a category with a placeholder text.

I also tried putting the {this.placeholder()} call within the textarea tag (as in <textarea>{this.placeholder()}</textarea>), but that results in no change at all of the textarea when changing categories.

I know that the form is definitely being rendered again because I can put a console.log call at the top of the render function, the function where the textarea is defined, and it prints at the change of each category.

So, what can I do to make the value of the box change when the category is changed, while still letting the user edit it?

Thanks.

Ad

Answer

Please try:

<textarea id='content' value={this.placeholder()}></textarea>

Here is React Specs saying:

in HTML, the value of is set via children. In React, you should use value instead.

https://facebook.github.io/react/docs/forms.html

Ad
source: stackoverflow.com
Ad