我想用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}，但无法更改输入字段。
我该如何解决？
答案 0 :(得分：2)
好吧，首先您不能这样做
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")}
/>
);
}
}
这是一个代码段：