将信息从 react-select 发送到 handleSubmit 函数

Question

我从 API 收到一些信息并将它们显示为 react-select 下拉项。我想选择任何项目然后通过按下按钮将其删除，该按钮将值发送到我的 handleSubmit 函数以再次发送到 API：

export class DeleteDepModal extends Component {

state = {
    departments: [],
    idValue: ' '
}

getDepartments() {
    axios.get('/api/jobs/list-departments',{headers:headers}).then(resp=>{
        this.setState({
          departments: resp.data.map(departments=>({label:[departments.name,' ',departments.company_name], value:departments.id})),
        })
      })
}

componentDidMount() {
    this.getDepartments()
}
handleSubmit = (event) => {
    event.preventDefault()
    console.log('handleDeletesubmitshot')

    const DepID = this.state.idValue
    axios(
      {
        method: 'delete',
        url: '/api/jobs/delete-department' + DepID,
        headers: headers,
      })
      .then(response => {
        console.log(response)
        alert('Department Deleted Successfully!')
      })
      .then(
        this.getDepartments()
      )
      .catch(error => {
        console.log(error.response)
      })
  }

  render () {
    return (
      <Modal
        {...this.props}
        size='lg'
        aria-labelledby='contained-modal-title-vcenter'
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title style={{ color: 'black' }} id='contained-modal-title-vcenter'>
            Delete Department
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>

          <div className='container'>
            <Form onSubmit={this.handleSubmit}>
            {
             
              <Row>
                <Col xs={6}>
                   <Select onChange={(event) => this.setState({ idValue: event.target.departments[i].value})} placeholder='Select from pre-created Departments' required options={this.state.departments}/>
                </Col>
                <Col xs={6}>
                    <Button style={{ position: 'relative', left: '150px' }} variant='danger' type='submit'>Delete Department</Button>
                </Col>
              </Row>
            }
            </Form>
          </div>
        </Modal.Body>
        <Modal.Footer />
      </Modal>
    )
  }
}

departments[i].value 是我想发送到我的 handleSubmit 函数的信息，但现在我有 2 个问题：

我不知道如何在我部门的数组中迭代并获取 selected (i) 项目的索引，for 循环不起作用
event.target 身份不明，无法获取 handleSubmit 函数的信息

我该怎么办？

Answer 1

使用 React select 的 onChange，您将在回调（而非事件）中获得值。此外，您不需要迭代部门数组并获取索引。

下面的代码应该足够了

<Select
      onChange={(value) =>
        this.setState({
          idValue: value,
        })
      }
      placeholder="Select from pre-created Departments"
      required
      options={this.state.departments}
    />

将信息从 react-select 发送到 handleSubmit 函数

sending info from react-select into a handleSubmit function

javascript

reactjs

react-select