无法在 ReactJS 上使用 defaultValue 编辑表单答案

【问题标题】：Cannot edit form using defaultValue on ReactJS无法在 ReactJS 上使用 defaultValue 编辑表单
【发布时间】：2018-12-30 03:28:33
【问题描述】：

我想用 reactJS 更新我的注册表单，当我用 Postman 运行我的后端时，它运行良好。

我的问题是关于前端的，当我运行它时，通过编辑输入字段，我收到一个警报，之后无法发布。

我的班级：

class EditClient extends Component {
  constructor(props) {
    super(props)
    this.state = {
      clients: [],
      Code: props.match.params.Code,
      Prenom: '',
      Nom: '',
      FAX: '',
      Telephone: '',
      Email: '',
      Adresse1: '',
      Adresse2: ''
    }
    this.handleEdit = this.handleEdit.bind(this);
  }
  componentDidMount() {
    axios.get('http://localhost:4000/app/viewclient/' + this.props.match.params.Code).then(response => {
      if (response && response.data) {
        this.setState({ clients: response.data });
      }
    }).catch(error => console.log(error));
  }
  handleEdit() {
    if (this.state.FAX.length == 8 && this.state.Telephone.length == 8) {
      var client = {
        Prenom: this.state.Prenom,
        Nom: this.state.Nom,
        FAX: this.state.FAX,
        Telephone: this.state.Telephone,
        Email: this.state.Email,
        Adresse1: this.state.Adresse1,
        Adresse2: this.state.Adresse2
      }
      axios({
        method: 'put',
        url: "http://localhost:4000/app/editclient/" + this.props.match.params.Code,
        data: client,
      }).then(function(response) {
        this.setState({ Prenom: "" });
        this.setState({ Nom: "" });
        this.setState({ FAX: "" });
        this.setState({ Telephone: "" });
        this.setState({ Email: "" });
        this.setState({ Adresse1: "" });
        this.setState({ Adresse2: "" });
      }.bind(this)).catch(function(error) {
        console.log(error);
      });
    }
    else {
      alert("Input field value is missing");
    }
  }
  handleCodeChange = (e) => {
    this.setState({ Code: e.target.value });
  }
  handlePrenomChange = (e) => {
    this.setState({ Prenom: e.target.value });
  }
  handleNomChange = (e) => {
    this.setState({ Nom: e.target.value });
  }
  handleFAXChange = (e) => {
    this.setState({ FAX: e.target.value });
  }
  handleTelephoneChange = (e) => {
    this.setState({ Telephone: e.target.value });
  }
  handleEmailChange = (e) => {
    this.setState({ Email: e.target.value });
  }
  handleAdresse1Change = (e) => {
    this.setState({ Adresse1: e.target.value });
  }
  handleAdresse2Change = (e) => {
    this.setState({ Adresse2: e.target.value });
  }
  render() {
    let { clients } = this.state;
    var btn = {
      display: 'block',
      margin: 'auto'
    }
    var Cd = { pointerEvents: 'none' }
    return (<div className="animated fadeIn">

           <Row>
          <Col xs="12"  >

              <Card>
                <CardHeader>
              <h4><strong>    <i className="fa fa-user"> </i> Modifier le client  </strong></h4>

                </CardHeader>

                  <CardBody>
                  {   this.state.clients.map(client => (
                    <Form className="form-horizontal"  method="POST"  key={client.Code} >


                   <FormGroup row >
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-id"><strong>Code client</strong></Label></h5>
                    </Col>

                      <Col xs="12" md="9" >
                        <div className="controls">
                          <InputGroup className="input-code">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-id-card-o" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="Code" style = { Cd } size="16" type="text" placeholder="Entrer le code du client"   onChange={this.handleCodeChange.bind(this)} defaultValue={client.Code}     readonly="readonly"/>
                            <FormFeedback className="help-block">Entrez le code SVP ! </FormFeedback>
                          </InputGroup>
                        </div>
                        </Col>
                      </FormGroup>

                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-pren"><strong>Prénom</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls" >
                          <InputGroup className="input-pren">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-user-circle-o" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="prénom" size="16" type="text"    defaultValue={client.Prenom}  onChange={this.handlePrenomChange.bind(this)} placeholder="Entrer le prénom du client" autoComplete='given-name' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>

                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-nom"><strong>Nom</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-nom">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-user-circle" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="nom" size="16" type="text"    defaultValue={client.Nom}     onChange={this.handleNomChange.bind(this)} placeholder="Entrer le nom du client" autocomplete='family-name' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>


                     <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-tel"><strong>Numéro de FAX</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-fax">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="flag-icon flag-icon-tn " title="tn" id="tn"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="fax" size="16" type="tel"   defaultValue={client.FAX}   onChange={this.handleFAXChange.bind(this)} placeholder="Entrer le numéro du FAX du client" autoComplete='tel' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>
                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-tel"><strong>Numéro de Téléphone</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-tel">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="flag-icon flag-icon-tn " title="tn" id="tn"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="tel" size="16" type="tel"   defaultValue={client.Telephone}   onChange={this.handleTelephoneChange.bind(this) } placeholder="Entrer le numéro du télèphone du client" autoComplete='tel-national' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>


                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-email"><strong>Email</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-email">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-envelope" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="email" size="16"      defaultValue={client.Email}   onChange={this. handleEmailChange.bind(this)}type="email" placeholder="Entrer l'email du client" autoComplete='email' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>


                       <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-adr"><strong>Adresse 1 </strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-Adr">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-location-arrow" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="adr" size="16" type="text"    defaultValue={client.Adresse1}  onChange={this.handleAdresse1Change.bind(this)} placeholder="Entrer l'adresse 1  du client" autocomplete='street-address' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>

                       <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-adr"><strong>Adresse 2 </strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-Adr2">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-location-arrow" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="adr2" size="16" type="text"   defaultValue={client.Adresse2}  onChange={this.handleAdresse2Change.bind(this)} placeholder="Entrer l'adresse 2  du client" autoComplete='address-line2' />

                          </InputGroup>

                        </div>
                        </Col>
                      </FormGroup>


                      <div className="form-actions" >

                        <Button  active color="info" size="lg"    style={btn}  type="submit"  onClick={() => this. handleEdit()} >Modifier</Button>

                      </div>
                    </Form>
                  ))}
                  </CardBody>

              </Card>

          </Col>

        </Row>

        </div>);
  }
}
export default EditClient;

我的路由器：

exports.editclient = function(req, res) {
    var data = {
        Prenom: req.body.Prenom,
        Nom: req.body.Nom,
        FAX: req.body.FAX,
        Telephone: req.body.Telephone,
        Email: req.body.Email,
        Adresse1: req.body.Adresse1,
        Adresse2: req.body.Adresse2,
    };
    var Code = req.params.Code
    connection.query("UPDATE clients set ? WHERE Code = ? ", [data, req.params.Code], function(error, results, fields) {
        if (error) throw error;
        else {
            res.send(JSON.stringify(results));
            console.log("Data is updated");
        }
    });
};

我的服务器：

router.put('/editclient/:Code', clients.editclient);

这似乎是与defaultValue有关的问题，因为当我使用value = {this.state.Code}和其他输入相同时，我可以修改并且没有收到任何错误。

我也尝试value ={client.Telephone}，但我无法更改输入字段。

请问我该如何解决？

【问题讨论】：

标签： javascript node.js reactjs forms axios

【解决方案1】：

Okej，首先你们不能这样做

this.setState({ Prenom: "" });
this.setState({ Nom: "" });
this.setState({ FAX: "" });
this.setState({ Telephone: "" });
this.setState({ Email: "" });
this.setState({ Adresse1: "" });
this.setState({ Adresse2: "" });

您将重新渲染七次。把它变成一个对象，像这样：

this.setState({
  Prenom: "",
  Nom: "",
  FAX: "",
  Telephone: "",
  Adresse1: "",
  Adresse2: ""
})

然后您可以创建一个函数来获取所有值。我通常添加两个参数。所以不要像这样：

handleCodeChange = (e) => {
    this.setState({ Code: e.target.value });
  }
  handlePrenomChange = (e) => {
    this.setState({ Prenom: e.target.value });
  }
  handleNomChange = (e) => {
    this.setState({ Nom: e.target.value });
  }
  handleFAXChange = (e) => {
    this.setState({ FAX: e.target.value });
  }
  handleTelephoneChange = (e) => {
    this.setState({ Telephone: e.target.value });
  }
  handleEmailChange = (e) => {
    this.setState({ Email: e.target.value });
  }
  handleAdresse1Change = (e) => {
    this.setState({ Adresse1: e.target.value });
  }
  handleAdresse2Change = (e) => {
    this.setState({ Adresse2: e.target.value });
  }

多这样做，保持干燥（不要重复自己）

handleFormchange = (e, name) => {
  this.setstate({[name] : e.target.value})
}

然后，当涉及到表单时，您将为它分配一个默认值，因此每次重新渲染时，它都会在表单上设置默认值。你需要的是 onChange 事件：

class Me extends Component {
  constructor(props) {
    super(props);
    this.state = { foo: "" };
  }

  handleFormChange = (e, name) => {
    this.setState({ [name]: e.target.value });
  };
  render() {
    return (
      <input
        type="text"
        value={this.state.foo}
        onChange={e => this.handleFormChange(e, "foo")}
      />
    );
  }
}

这是一个sn-p：

snippet

【讨论】：

谢谢@Cyrus。