添加时验证 Table 个项目

Question

我在向 table 添加项目时遇到问题。我在下面有一个简单的 reactjs 代码。我可以在那里轻松添加一行。问题是，它不允许我添加相同的名字。意思是，如果我已经在 table 中添加了名字“John”，验证将不允许我再添加一个“Jonh”。我在下面附上了我的代码片段。将不胜感激任何帮助。非常感谢！

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() 和 return 从该点停止处理程序。

添加时验证 Table 个项目

Validation Table Items on add

validation

reactjs