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

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

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

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

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

Answer 2

的变化：

1。将数据存储在Stepper状态，这样每当您添加新条目时，它都会自动重新呈现该表。

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

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

如何在按表单上的提交时动态地向表添加行

2 个答案: