CODEWITHSUNDEEP
javascriptreactjssemantic-ui-react
James Chung
James Chung

Reputation: 125

semanticui react textarea onchange event

(first question on SE, will try to adhere to the community rules and guidelines - did some searching on Google and SO but couldn't find an answer)

I am using the semantic-ui-react module to implement a Form with textarea.

Constructor with functions

constructor(props) {
super(props);
this.state = {
  loading: false,
  email: '',
  request: 'your request',
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleTextareaChange = this.handleTextareaChange.bind(this);
}
handleSubmit() {
  const { email } = this.state;
  console.log(email);
}
handleChange(e, { name, value }) {
  this.setState({
    [name]: value
  });
}
handleTextareaChange(e){
  console.log(e);
  this.setState({
    request: e
  });
}

I can successfully get form input values using the handleChange function binded to the onChange of 

render() {
return (
  <div>
    <Grid centered>
      <Grid.Row>
        <Grid.Column width={8}>
          <Form onSubmit={this.handleSubmit} loading={this.state.loading}>
            <Form.Field>
              <h1>Leave us a request or note</h1>
              <label>enter email address</label>
              <Form.Input placeholder='Email' name='email' value={this.state.email} onChange={this.handleChange} />
              <Form.Field label='your request/suggestion' name='request' value={this.state.request} onChange={this.handleTextareaChange} control='textarea' rows='3' />
              <Form.Button primary content='Submit' />
            </Form.Field>
          </Form>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </div>
)
}

but handling onChange in the textarea with handleChange gives a TypeError: Cannot read property 'name' of undefined

should I create a different function to be binded to the textarea onChange (I added a handleTextareaChange function just to get the event) to get the contents of the textarea?

Thank you for any help.

Upvotes: 2

Views: 4001

Answers (2)

Oleksandr Fediashov
Oleksandr Fediashov

Reputation: 4335

The right way is to grab value from the data object, which will be also passed into the event.

<TextArea onChange={(e, { value }) => console.log(value)} />

You can view a code example here.

Upvotes: 1

James Chung
James Chung

Reputation: 125

I did some more searching and for textarea the correct way to get the contents is:

handleTextareaChange: function (evt) {
  this.setState({ request: evt.target.value });
}

Apologize if this question was redundant or unnecessary.

Upvotes: 2

Related Questions