如何在表单上按下提交时动态地将行添加到表中

Question

我需要帮助创建当用户按下提交按钮时自动添加行的部分。现在有 4 个字段和一个提交按钮。在其下方有一个显示所有数据的表格。因此，当有人在文本字段中输入数据并按下提交时，它应该将该数据存储到“genData”中，之后，它应该在表中创建一个新行，人们应该能够看到它应该在下面的新数据已显示的当前数据。

const genData = [
{ firstName: "foo", lastName: "boo", type: "male", email: "fooboo@gmail.com"}

];

class Stepper extends React.Component {
render() {
return (
  <div>
    <TextField
      hintText="First Name"
    />
    <TextField
      hintText="Last Name"
    />
    <TextField
      hintText="Type"
    />
    <TextField
      hintText="Email"
    />
    <RaisedButton label="Submit" primary={true}/>

    <Table>
<TableHeader>
  <TableRow>
    <TableHeaderColumn>First Name</TableHeaderColumn>
    <TableHeaderColumn>Last Name</TableHeaderColumn>
    <TableHeaderColumn>Type</TableHeaderColumn>
    <TableHeaderColumn>Email</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody>
  {genData.map( (row) => (
  <TableRow>
    <TableRowColumn>{row.firstName}</TableRowColumn>
    <TableRowColumn>{row.lastName}</TableRowColumn>
    <TableRowColumn>{row.type}</TableRowColumn>
    <TableRowColumn>{row.email}</TableRowColumn>
  </TableRow>
  ))}
</TableBody>
</Table>

  </div>
);
}
 }

Answer 1

变化：

1.将数据存储在Stepper的状态中，这样每当您添加新条目时，它都会自动重新渲染表格。

2. 使用RaisedButton 按钮定义一个onTouchTap 事件，然后单击该按钮将新数据推送到状态变量中。

3. 要么你必须使用ref 作为uncontrolled component 要么为每个输入字段定义一个state 变量，以在提交函数中获取输入字段值。

4.循环创建时为每个元素分配唯一键。

完整代码：

class Stepper extends React.Component {

  constructor(){
    super();
    this.state = {
      genData : [
          {
            firstName: "foo", 
            lastName: "boo", 
            type: "male", 
            email: "fooboo@gmail.com"
          }
      ]
    }
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleSubmit(){
    let genData = this.state.genData.slice();
    genData.push({
      firstName: this.fName.props.value, 
      lastName: this.lName.props.value, 
      type: this.type.props.value, 
      email: this.email.props.value
    });
    this.setState({ genData })
  }

  render() {
    return (
      <div>
        <TextField
          ref={el => this.fName = el}
          hintText="First Name"
        />
        <TextField
          ref={el => this.lName = el}
          hintText="Last Name"
        />
        <TextField
          ref={el => this.type = el}
          hintText="Type"
        />
        <TextField
          ref={el => this.email = el}
          hintText="Email"
        />
        <RaisedButton onTouchTap={this._handleSubmit} label="Submit" primary={true}/>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>First Name</TableHeaderColumn>
              <TableHeaderColumn>Last Name</TableHeaderColumn>
              <TableHeaderColumn>Type</TableHeaderColumn>
              <TableHeaderColumn>Email</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            {this.state.genData.map( (row, i) => (
              <TableRow key={i}>
                <TableRowColumn>{row.firstName}</TableRowColumn>
                <TableRowColumn>{row.lastName}</TableRowColumn>
                <TableRowColumn>{row.type}</TableRowColumn>
                <TableRowColumn>{row.email}</TableRowColumn>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    );
  }
}

更新：

将此代码用于受控组件：

class Stepper extends React.Component {

  constructor(){
    super();
    this.state = {
      fName: '',
      lName: '',
      type: '',
      email: '',
      genData : [
          {
            firstName: "foo", 
            lastName: "boo", 
            type: "male", 
            email: "fooboo@gmail.com"
          }
      ]
    }
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleSubmit(){
    let genData = this.state.genData.slice();
    genData.push({
      firstName: this.state.fName, 
      lastName: this.state.lName, 
      type: this.state.type,
      email: this.state.email
    });
    this.setState({ 
      genData,
      fName: '',
      lName: '',
      type: '',
      email: '' 
    })
  }

  onChange(fieldName, value){
    this.setState({
      [fieldName]: value
    });
  }

  render() {
    return (
      <div>
        <TextField
          value={this.state.fName}
          onChange={(e,value) => this.onChange('fName', value)}
          hintText="First Name"
        />
        <TextField
          value={this.state.lName}
          onChange={(e,value) => this.onChange('lName', value)}
          hintText="Last Name"
        />
        <TextField
          value={this.state.type}
          onChange={(e,value) => this.onChange('type', value)}
          hintText="Type"
        />
        <TextField
          value={this.state.email}
          onChange={(e,value) => this.onChange('email', value)}
          hintText="Email"
        />
        <RaisedButton onTouchTap={this._handleSubmit} label="Submit" primary={true}/>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>First Name</TableHeaderColumn>
              <TableHeaderColumn>Last Name</TableHeaderColumn>
              <TableHeaderColumn>Type</TableHeaderColumn>
              <TableHeaderColumn>Email</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            {this.state.genData.map( (row, i) => (
              <TableRow key={i}>
                <TableRowColumn>{row.firstName}</TableRowColumn>
                <TableRowColumn>{row.lastName}</TableRowColumn>
                <TableRowColumn>{row.type}</TableRowColumn>
                <TableRowColumn>{row.email}</TableRowColumn>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    );
  }
}

Answer 2

您需要在按钮上设置事件侦听器/处理程序，以便在单击时执行某些操作。在 React 组件中，您通常通过 onClick 属性传递函数以进行调用，但这取决于组件。

<RaisedButton label="Submit" primary={true} onClick={(e) => doSomething(); } />

<RaisedButton /> 也有一个用于触摸输入的onTouchTap 属性，您可能需要检查一下（文档here）

要获取新数据，您需要获取所有<TextField /> 组件的值并将它们推送到genData 数组中。我还建议将此数组作为内部 state 并使用 this.setState() 对其进行更新。