验证表项on add.

Question

我有一个问题，添加一个项目到我的表。下面我有一个简单的reactjs代码。我可以很容易地加一行。问题是，它不应该允许我添加相同的名称。意思是，如果我的名字是john已经添加到表中，验证应该不允许我再添加一个"john"。我在下面附上了我的片段。非常感谢任何帮助。非常感谢!

function Text(props) {
var style = {
paddingTop: 5,
margin: 5
};
return (
<div>
<div style={style}> {props.label} </div>
<input
type="text"
name={props.name}
style={style}
value={props.labelInputText}
onChange={props.changeHandler}
/>
</div>
);
}
function TableFormList(props) {

return(
<table>
<tr>
{props.headers.map((item,index) => <th key={index}>{item}</th>)}
</tr>
<tbody>

{props.formElements.map((item,index) => <tr key={index}><td>{item.fName}</td><td>{item.lName}</td></tr> )}
</tbody>
</table>
)
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
lastName: "",
items: []
};
this.changeHandler = this.changeHandler.bind(this);
this.AddElementsOnSubmit = this.AddElementsOnSubmit.bind(this);
}
changeHandler(event) {
this.setState({ [event.target.name]: event.target.value });
}
AddElementsOnSubmit() {
var firstName = this.state.firstName;
var lastName = this.state.lastName;
var elements = this.state.items.slice();
elements.push({fName: firstName, lName: lastName});
this.setState({ items: elements, firstName: "", lastName: "" });
}
render() {
var style = {
padding: 5,
margin: 5
};
return (
<div>
<Text
label="First Name"
name="firstName"
labelInputText={this.state.firstName}
changeHandler={this.changeHandler}
/>
<Text
label="Last Name"
name="lastName"
labelInputText={this.state.lastName}
changeHandler={this.changeHandler}
/>
<input
type="submit"
value="submit"
style={style}
onClick={() => this.AddElementsOnSubmit()}
/>

<div>
<TableFormList
headers={["First Name", "Last Name"]}
formElements={this.state.items}
/>

</div>

</div>
);
}
}
ReactDOM.render(<App />, 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 1

就像这样改变你的AddElementsOnSubmit:

AddElementsOnSubmit() {
var firstName = this.state.firstName;
var lastName = this.state.lastName;
var elements = this.state.items.slice();
if (elements.find((element) => element.fName === firstName)) {
window.alert(`${firstName} is existed`);
return;
}
elements.push({ fName: firstName, lName: lastName });
this.setState({ items: elements, firstName: "", lastName: "" });
}

---

在AddElementsOnSubmit()中，您将使用Arr.find()在那里查找重复的名字，并返回以从该点停止处理程序。