时间戳

首页 > 解决方案 > 从选项下拉存储状态以将其传递给父组件

javascript - 从选项下拉存储状态以将其传递给父组件

问题描述

我正在尝试searchValue根据从中选择的值存储参数options，以便可以将该值从子组件发送到父组件。但是，searchValue返回未定义。如何根据在中选择的值存储我searchValue的值option？

我有以下内容：

class SearchField extends Component {
    state = {
        options: ["Choose search method", "Id Number", "Phone Number", "Mobile Number"]
    };

    handleSearchChoice = (e) => {
        var searchValue = e.target;
        console.log(searchValue);
    };

    render() {
       const initialValues = {
          name: ""
       };
       return (
          <Form handleSubmit={this.onFormSubmit} initialValues={initialValues}>
          {({ values, handleChange }) => (
             <React.Fragment>
                <FormGroup>
                <DateInput />
                <FormText>Enter customer info</FormText>
                <Input placeholder="mobile, id number, etc..."
                 name="name"
                 value={values.name}
                 onChange={handleChange}/>
                <FormText>Select an option</FormText>
                <Select onChange={this.handleSearchChoice}>
                  {this.state.options.map(option => (
                     <option key={option} value={option}>
                       {option}
                     </option>
                  ))}
               </Select>
               <div>
                  <Button onClick={this.isButtonEnabled}>Submit</Button>
               </div>
            </FormGroup>
         </React.Fragment>
       )}
     </Form>
   );
  }
}

标签： javascriptreactjs

解决方案

目前，当您应该获取所选选项的值时，您（错误地）试图从状态中获取元素（出于某种原因）。

您应该为每个选项添加一个 value 属性

<option key={option} value={option}>{option}</option>

然后您可以在句柄方法中拾取它

handleSearchChoice = (e) => {
  var { value: searchValue } = e.target;
  console.log(searchValue);
};

注意：我根据您的问题重新标记了被破坏 value的属性。searchValue

您可能需要重新考虑如何构建该选择元素，因为您将收到“选择搜索方法”作为返回的默认选项的值。

推荐阅读