Question

我想通过Axios将身份证和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;

Answer 1

您可以在this.change上设置setState，因为它已经绑定了输入的onChange事件。而且不要忘了javascript是区分大小写

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

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

额外；

您应该以以下方式访问returnDate： this.handleSubmit(livre.id, this.state.returnDate)

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

1 个答案: