Я пытаюсь создать проблему, и я не могу отправить данные с зависимостью «реагировать-выбирать»

#reactjs #react-select

Вопрос:

Я пытаюсь сделать глупость и не могу отправить данные. Все остальные данные сохраняются без проблем, но те, которые связаны с «Выбором», — нет. Как мне это сделать? Спасибо.

 const initialValue = {
  tenants: '',
  options: '', 
  tenantOptions:''
}


const [tenantOptions, setTenantsOptions] = useState([]);


//.. rest of the code omitted

//.. rest of the code omitted

   <form method="post" onSubmit={onSubmit}>
     <div className="form-group row mt-3">
       <label className="col-md-3 label-control form- 
           label">Tenants</label>
           <div className="col-md-8">
           <Select
             options={tenantOptions}                      
             onChange={obj => dispatch(selectContract(obj amp;amp; obj.value ? 
             obj.value : ''))}  
             name="tenants"
             id="tenants"
             className="select-group"
             isSearchable={true}                     
             isClearable={true}
             theme={headerSelectTheme}
             />
      </div>
 

Все остальные данные сохраняются без проблем, но те, которые связаны с «Выбором», — нет. Как мне это сделать? Спасибо.

 const saveCsv = (data, cb) => {
    axios
      .post(`${process.env.REACT_APP_API_MYAPP_URL}/api/orders/csv`, data, {
        headers: { Authorization: AuthStr }
      })
      .then(function(response) {
        cb(response);
        console.log('response: ')
        console.log(response)
      })
      .catch(function(error) {
        console.log(error);
        cb({
          error: true,
          message: error.message,
          status: error.response amp;amp; error.response.status ? error.response.status : ''
        });
      });
  };
  
  
  function onSubmit(evt) {
   
    saveCsv(values, res => {
      evt.preventDefault()
      if (res.error) {
        toast.error('Failed to generate CSV file!')
        setModalLoading(false)
        return
      }

      toast.success('Tenant CSV file created.')
    
      setModal(false)     
  }); 
 

Ответ №1:

Параметр obj в обратном вызове onChange является объектом события, а не узлом DOM. Вы можете получить узел DOM, получив доступ к event.target свойству.

Так что вместо obj.value того, чтобы вы должны были проверять наличие obj.target.value

onChange={obj => dispatch(selectContract(obj amp;amp; obj.value ? obj.value : ''))}

становится

onChange={obj => dispatch(selectContract(obj amp;amp; obj.target amp;amp; obj.target .value ? obj.target.value : ''))}

Комментарии:

1. Я думаю, что это должно все исправить

2. Это не сработало, там, в «ответе», этого не было. Может быть, есть еще один недостающий шаг для решения? Спасибо