javascript - REACTJS 中状态变化的错误/问题

Question

我想通过 Axios 将 id book 和 returnDate 发送到后面。但是，对于 id 来说没问题，但对于 returnDate，值保持“未定义”。我可以在我的代码中添加/更改什么，以便使用代码末尾输入中输入的日期更改 returnDate？所以在 handleSubmit 函数中使用它。谢谢你。

    import { MDBBtn, MDBTableBody, MDBTableHead, MDBTable, MDBModal, MDBModalHeader, MDBModalBody, MDBModalFooter} from "mdbreact";
    import axios from 'axios';

class MyLends extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      lends: null,
      returnDate: null,
      modal: false,
      id: '',
      error:'',
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }


toggle = () => {
  this.setState({
    modal: !this.state.modal
  });
}

change = e => {
  this.setState({
    [e.target.id]: e.target.value,
  });
}

handleSubmit = (id, returnDate) => e => {
  console.log(id, returnDate);
  const { lends } = this.state;
  let newBooks = lends;
  let formData = new FormData();
  formData.append("id",id);
  formData.append("returnDate",returnDate);
  const url = "http://localhost:8888/liste_prets/rendu_pret.php"
  axios.post(url, formData)

  .then(function(response){
    const tmp = lends;
    newBooks = tmp.filter(livre => livre.id !== id);
    alert('Succès : Livre à nouveau marqué comme disponible');
  })

  .catch((error)=>{
    console.log(error)
    if (error.response.status === 403){
      console.log(error);
      alert('Echec du rendu');
    }
  });

  setTimeout(() => {
    this.setState({
      lends: newBooks
    })
  }, 500);


  setTimeout(() => {
    this.setState({
      error: '',
    });
  }, 2000);

  e.preventDefault();
}


async componentDidMount() {
    const url = "http://localhost:8888/liste_prets/liste.php";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({lends: data.results.livres, loading: false})
    console.log(data.results.livres);
  }

render() {

    return (
        <div>
          <MDBTable hover>
            <MDBTableHead>
              <tr>
              <th>Titre</th>
              <th>Auteur</th>
              <th>Emprunteur</th>
              <th>Date d'emprunt</th>
              <th></th>
              </tr>
            </MDBTableHead>
            <MDBTableBody>
              {
                this.state.lends.map(livre => (
                  <tr key={livre.id} onChange={this.Change} >
                    <td>{livre.title}</td>
                    <td>{livre.author}</td>
                    <td>{livre.borrower}</td>
                    <td>{livre.borrowDate}</td>
                    <td><MDBBtn onClick={this.toggle} color="dark">Rendu</MDBBtn>
                        <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
                          <MDBModalHeader toggle={this.toggle}>Date de rendu</MDBModalHeader>
                          <MDBModalBody>
                            <input
                              type="date"
                              id="returnDate"
                              placeholder="jj/mm/aa"
                              className="form-control"
                              onChange={this.Change}
                            />
                          </MDBModalBody>
                          <MDBModalFooter>
                            <MDBBtn color="secondary" onClick={this.toggle}>Annuler</MDBBtn>
                            <MDBBtn color="primary" onClick={this.handleSubmit(livre.id, this.returnDate)}>Enregistrer</MDBBtn>
                          </MDBModalFooter>
                        </MDBModal>


                    </td>
                  </tr>
                ))
              }
            </MDBTableBody>
          </MDBTable>

        </div>
      );
    }
}

export default MyLends;

标签： javascriptreactjsinputaxios

Answer 1

你可以只 setState onthis.change因为你已经绑定了它输入的 onChange 事件。并且不要忘记 javascript区分大小写

change = e => {
  this.setState({
    returnDate: e.target.value,
  });
}

在您的输入中，您可能希望将 onChange 降低到onChange={this.change}

额外的;

您应该访问 returnDate 为；this.handleSubmit(livre.id, this.state.returnDate)