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

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

＆＃13;

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>
    );
  }
}

＆＃13;

Answer 2

这应该以相同的方式工作

＆＃13;

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>
              )}
            />
  );
};

＆＃13;

Answer 3

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

如果您想查看当前在选择中选择的值，您可以查看values.section给出的道具中的<Form>。

Here's a demo

React：在select

3 个答案: