отправка информации из response-select в функцию handleSubmit - PullRequest
Новая
       6

отправка информации из response-select в функцию handleSubmit

0 голосов
/ 14 июля 2020

Я получаю некоторую информацию от API и показываю ее как раскрывающиеся элементы с выбором ответа. Я хочу выбрать любой элемент, а затем удалить его, нажав кнопку, которая отправляет значение моей функции 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>
    )
  }
}

sizes [i] .value - это информация, которую я хочу отправить в мою функцию handleSubmit, но теперь у меня две проблемы:

  1. Я не знаю, как выполнить итерацию в массиве моего отдела и получить индекс выбранного элемента ( i), a для l oop не работает

  2. event.target не идентифицирован и не получает информацию в функцию handleSubmit

Что делать?

1 Ответ

2 голосов
/ 14 июля 2020

С помощью response select onChange вы получите значение в обратном вызове (не событие). Также вам не нужно перебирать массив отделов и получать индекс.

Приведенного ниже кода должно хватить 

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