undefined value in semantic-ui input

Question

I have simple from which i used semantic-ui-react to create it :

  <Form onSubmit={this.handleSubmit.bind(this)}>
          <Form.Field>
            <Input placeholder="From ..." type="text" ref="from" />
            <Label pointing>please enter valid email adress</Label>
          </Form.Field>
          <Divider />

now i cant access to value's of the input. here is my code:

  from: this.refs.from.value

it's all undefined.how can fix this ?

Answer 1

I recommend to use Form and related components in the controlled way, because most of SUIR components are functional, so they don't support refs. I've a codepen to show it in action. There is also example in docs.