在React

Question

我正在创建一个在表格上显示其输入的表单，每次单击提交时，第一行都会被添加，第二行也会添加，但不会添加到表格中。我不确定是什么问题。我想这可能是因为我如何操纵存储状态的数组？如果不是，那可能是什么？

这是我的代码：

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>
    <tr>
          {props.formElements.map((item,index) => <td key={index}>{item}</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(firstName, 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

为每个表行运行map函数，而不是表数据。也将person对象推送到items数组。

  elements.push({fName: firstName, lName: lastName});

＆＃13;

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;