reactjs - React: Saving mapping in select

Question

Tell me, please, how to save the selected value of option, at me in a select it is saved only first value (which is One).How to save the selected value in select?

Here is the code (this is final-form):

export const SelectFilter = props => {
  const { onFilterChange, filterOptions } = props;
  return (
            <Form
              render={({ handleSubmit }) => (
                <form onSubmit={handleSubmit}>
                  <div>
                    <label htmlFor="section">Select:</label>
                    <Field
                       id="section"
                       name="section"
                       component="select"
                       onChange={e => onFilterChange(e)}
                       defaultValue={filterOptions.section}
                    >
                      <option value="one">One</option>
                      <option value="two">Two</option>
                      <option value="three">Three</option>
                    </Field>
                  </div>
                </form>
              )}
            />
  );
};

Answer 1

这应该以相同的方式工作

export const GalleryFilter = props => {
  const { onFilterChange, filterOptions } = props;
  var currentSelection = "one";
  
  function onChange(e)
  {
    e.preventDefault();
    let {value} = e.target;

    currentSelection = value;
    onFilterChange(e);
  }

  return (
            <Form
              render={({ handleSubmit }) => (
                <form onSubmit={handleSubmit}>
                  <div>
                    <label htmlFor="section">Select:</label>
                    <Field
                       id="section"
                       name="section"
                       component="select"
                       onChange={onChange}
                       value={currentSelection}
                    >
                      <option value="one">One</option>
                      <option value="two">Two</option>
                      <option value="three">Three</option>
                    </Field>
                  </div>
                </form>
              )}
            />
  );
};

Answer 2

这是我通常如何处理所有形式的反应。通过让您传递提交功能，这将使其可重用：D 如果您确实想要这样做，您也可以传递 onChange 功能

class GalleryFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentValue: "one"
    };

    this.onChange = this.onChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  onChange(e) {
    e.preventDefault();
    let {
      value
    } = e.target;
    this.setState({
      currentValue: value
    });
  }

  submit(e) {
    e.preventDefault();
    this.props.Submit(this.state.currentValue);
  }
  render() {
    return ( <
      form onSubmit = {
        this.submit
      } >
      <
      div >
      <
      label htmlFor = "section" > Select: < /label> <
      select id = "section"
      name = "section"
      component = "select"
      onChange = {
        this.onChange
      }
      value = {
        this.state.currentValue
      } >
      <
      option value = "one" > One < /option> <
      option value = "two" > Two < /option> <
      option value = "three" > Three < /option> <
      /select> <
      /div> <
      /form>
    );
  }
}

Answer 3

你误解了 React Final Form 的意义。看起来您正在尝试跟踪在 中手动选择了哪个值state，但这正是 React Final Form 为您所做的。

values.section如果您想查看当前在select中选择了什么值，您可以查看<Form>.

这是一个演示。