Реагировать: сохранение отображения в избранном

Question

Подскажите, пожалуйста, как сохранить выбранное значение option, у меня в select сохраняется только первое значение (которое One). Как сохранить выбранное значение в select?

Вот код (это 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

Вы неправильно понимаете, суть React Final Form.Похоже, вы пытаетесь отслеживать, какое значение выбрано вручную в state, но это именно то, что React Final Form делает для вас.

Если вы хотите увидеть, какое значение в настоящий момент выбрано ввыберите, вы можете посмотреть на values.section в опоре, заданной <Form>.

Вот демоверсия .

Answer 3

Вот как я обычно реагирую на все формы.Это позволит использовать его повторно, позволяя передать функции отправки: 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>
    );
  }
}