使用 map() 构建表单，如何从 this.state 放置信息?

Question

import React, { Component } from "react";
import myPhone from "../service/checkPhone.js";
import {usersParam} from'../variable.js';
class FormForUserChange extends Component {
constructor() {
super();
this.state = {
name: "",
age: "",
gender: "",
phone: "",
address: "",
display: "none"
};
}

componentWillMount = () => {
this.setState({ name: this.props.userToChange.name });
this.setState({ age: this.props.userToChange.age });
this.setState({ gender: this.props.userToChange.gender });
this.setState({ phone: this.props.userToChange.phone });
this.setState({ address: this.props.userToChange.address });
};
_makeListFormData=(usersParam)=>{
return usersParam.map(each => {
return (
<input
className="form-control"
type="text"
// defaultValue={this.state.{each}}
placeholder={each}
ref={input => (this.each = input)}
/>
);
});
}
_handleChange = event => {
this.setState({ gender: event.target.value });
};
_handleSubmit = event => {
event.preventDefault();
if (
this.name.value &&
this.address.value &&
this.phone.value &&
this.age.value &&
myPhone(this.phone.value)
) {
const changedUser = {
name: this.name.value,
age: this.age.value,
gender: this.state.gender,
phone: this.phone.value,
address: this.address.value,
id: this.props.userToChange.ident
};
this.props.saveChangedUser(changedUser, this.props.userToChange.hash);
} else {
this.setState({ display: "block" });
}
};
render() {
let form;
let btnText;
const styles = {
display: this.state.display
};
const inputsInForm=this._makeListFormData(usersParam);
if (this.props.openModal) {
form = (
<div className="shadow p-3 mb-5 bg-white rounded" id="form">
<form
className="form-control-file. form-container"
onSubmit={this._handleSubmit.bind(this)}
>
{inputsInForm}
<button className="btn btn-primary" type="submit">
Save changes
</button>
</form>
<span id="form-fill-error" style={styles}>
please fill out all fields correct
</span>
</div>
);
} else {
form = "";
}
return (
<div>
<button
className="btn btn-primary"
id="add-user-btn"
disabled="disabled"
>
{btnText}
</button>
{form}
</div>
);
}
}
export default FormForUserChange;

我有一个数组，从中构建 form(_makeListFormData( 的输入。在短语持有人中，我必须从状态(来自道具(放置信息。

所以在占位符中，我应该放这样的东西.state{each}它不会偏离轨道。你能给我一个建议吗？

Answer 1

您可以根据自己的情况使用placeholder={this.state[each]}。此外，请使用componentDidMount，因为componentWillMount将在未来被弃用，如 @Think-Twice 所述。另外，一次设置您的状态，而不是像那样单独设置。

const usersParam = ['name', 'age', 'gender', 'phone', 'address'];
class FormForUserChange extends React.Component {
constructor() {
super();
this.state = {
name: "",
age: "",
gender: "",
phone: "",
address: "",
display: "none"
};
}
componentDidMount = () => {
this.setState({
name: this.props.userToChange.name,
age: this.props.userToChange.age,
gender: this.props.userToChange.gender,
phone: this.props.userToChange.phone,
address: this.props.userToChange.address,
});
};
_makeListFormData = (usersParam) => {
return usersParam.map(each => {
return (
<input
className="form-control"
type="text"
// defaultValue={this.state.{each}}
placeholder={this.state[each]}
ref={input => (this.each = input)}
/>
);
});
}
render() {
const inputsInForm = this._makeListFormData(usersParam);
return(
<div>{inputsInForm}</div>
);
}
}
const userToChange = {
name: "foo",
age: 25,
gender: "male",
phone: "123",
address: "some add",
}
ReactDOM.render(<FormForUserChange userToChange={userToChange} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

虽然这不是您问题的解决方案，但我想解决的问题很少。

停止使用 componentWillMount，因为这已被弃用。

所以你可以直接在构造函数中分配道具

constructor(props) {
super(props);
this.state = {
name: this.props.userToChange.name,
age: this.props.userToChange.age,
gender: this.props.userToChange.gender,
phone: this.props.userToChange..phone,
address: this.props.userToChange.address,
display: "none"
};
}

注意：您不需要对每个使用setState。您可以在单个集合中执行所有操作状态，如下所示

this.setState({
name: this.props.userToChange.name,
age: this.props.userToChange.age,
gender: this.props.userToChange.gender,
phone: this.props.userToChange..phone,
address: this.props.userToChange.address,
display: "none"
});