How to get value in react-widgets DropdownList when select?

Question

I am practicing frontend skill please advice

The solution in my head is this. I have to debark the tab by myself
When I look into the official doc. I has a listener function implemented, but it will hand on the value when you click submit button.

I want to dispatch the selected value immediately in the app. What is the best practice on this?

onSelect is fine. I can see the selectedValue, but it is not exact result I want. I want it from onChange.

let ReactWidgetsForm = props => {
  const {handleSubmit, pristine, reset, submitting, variants, colors} = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field
          name="variantName"
          component={DropdownList}
          data={colors}
          valueField="value"
          textField="color"
          onSelect={(event)=>{
            console.log(event);
          }}
          onClick={(event) =>{
            console.log(event.target);
          }}
        />
      </div>
    </form>
  )
};

Answer 1

They are many things wrong in my code! I have to use stateful class-based component not just plain function-based component

class VariantDropdownList extends Component {
  constructor(...args) {
    super(...args);
    this.state = { value: '--' };
    this.colors = [{color: 'Red', value: 'ff0000'},
      {color: 'Green', value: '00ff00'},
      {color: 'Orange', value: '#FF4500'},
      {color: 'Blue', value: '0000ff'}];
  }

  render() {
    return (
      <Fragment>
        <DropdownList
          data={this.colors}
          value={this.state.value}
          valueField='color'
          textField='color'
          onChange={(value) => {
              console.log(value);
              this.setState({ value })
            }
          }
        />
      </Fragment>
    )
  }
}