Question

我正在练习frontend技能，请咨询

我头脑中的解决方案是this。我必须自己去除标签当我查看official doc时。我实现了一个侦听器功能，但是当您点击submit按钮时它会传递该值。

我希望在应用中立即dispatch所选值。这方面的最佳做法是什么？

onSelect没问题。我可以看到selectedValue，但这不是我想要的确切结果。我希望它来自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

我的代码中有很多错误！我必须使用stateful class-based component而不仅仅是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>
    )
  }
}

如何选择react-widgets DropdownList中的值？

1 个答案: