Javascript 如何在表单上按submit时向表中动态添加行

我需要帮助创建当用户按下提交按钮时自动添加行的部分。现在有4个字段和一个提交按钮。下面是一个表格，显示了所有数据。因此，当有人在文本字段中输入数据并按submit键时，它应该将数据存储到“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>
);
}
 }

const genData=[
{名字：“foo”，姓氏：“boo”，类型：“男性”，电子邮件：fooboo@gmail.com"}
];
类Stepper扩展了React.Component{
render（）{
返回(
名字
姓
类型
电子邮件
{genData.map（（行）=>(
{row.firstName}
{row.lastName}
{row.type}
{row.email}
))}
);
}
}

您需要在按钮上设置事件侦听器/处理程序，以便在单击按钮时执行某些操作。在React组件中，通常通过

onClick

prop传递函数以获得调用，但这取决于组件

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

doSomething（）；}/>

还有一个用于触摸输入的

onTouchTap

属性，您可能需要检查（文档）

要获取新数据，您需要获取所有

组件的值，并将它们推送到

genData

数组中。我还建议将此数组作为内部数组，并使用

this.setState（）

更改对其进行更新：

1。将数据存储在

步进器

的状态，以便无论何时添加新条目，它都会自动重新呈现表格

2.使用

RaisedButton

按钮定义一个

ontouch轻触

事件，然后单击该按钮，在状态变量中推送新数据

3.您必须对

非受控组件使用
ref
，或者为每个输入字段定义一个
状态
变量，以获取提交函数中的输入字段值

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

类步进器扩展React.Component{
构造函数（）{
超级（）；
此.state={
性别：[
{
名字：“福”，
姓：“boo”，
类型：“男性”，
电子邮件：“fooboo@gmail.com"
}
]
}
this.\u handleSubmit=this.\u handleSubmit.bind（this）；
}
_handleSubmit（）{
让genData=this.state.genData.slice（）；
genData.push({
名字：this.fName.props.value，
lastName:this.lName.props.value，
类型：this.type.props.value，
电子邮件：this.email.props.value
});
this.setState（{genData}）
}
render（）{
返回(
this.fName=el}
hintText=“名字”
/>
this.lName=el}
hintText=“姓氏”
/>
this.type=el}
hintText=“类型”
/>
this.email=el}
hintText=“电子邮件”
/>
名字
姓
类型
电子邮件
{this.state.genData.map（（行，i）=>(
{row.firstName}
{row.lastName}
{row.type}
{row.email}
))}
);
}
}

更新：

将此代码用于受控组件：

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

类步进器扩展React.Component{
构造函数（）{
超级（）；
此.state={
fName:“”，
lName:“”，
类型：“”，
电子邮件：“”，
性别：[
{
名字：“福”，
姓：“boo”，
类型：“男性”，
电子邮件：“fooboo@gmail.com"
}
]
}
this.\u handleSubmit=this.\u handleSubmit.bind（this）；
}
_handleSubmit（）{
让genData=this.state.genData.slice（）；
genData.push({
名字：this.state.fName，
姓氏：this.state.lName，
类型：this.state.type，
电子邮件：this.state.email
});
这个.setState（{
genData，
fName:“”，
lName:“”，
类型：“”，
电子邮件：“”
})
}
onChange（字段名、值）{
这是我的国家({
[字段名]：值
});
}
render（）{
返回(
this.onChange（'fName'，value）}
hintText=“名字”
/>
this.onChange（'lName'，value）}
hintText=“姓氏”
/>
this.onChange（'type'，value）}
hintText=“类型”
/>
this.onChange（'email'，value）}
hintText=“电子邮件”
/>
名字
姓
类型
电子邮件
{this.state.genData.map（（行，i）=>(
{row.firstName}
{row.lastName}
{row.type}
{row.email}
))}
);
}
}
我建议您阅读（许多）react的todo示例，因为它们都有您感兴趣的功能。当我按submit时，它不会重新呈现和更新表格。这不行anything@JohnBerry很抱歉，like行中的handlesubmit函数有一个输入错误：
let genData=this.state.slice（）特别检查更新的代码
handlesubmit
函数使用此行：
让genData=this.state.genData.slice（）
它可以工作。这修复了错误，但问题是它在表中创建了一个空行，它不从字段中获取数据，并将其放入表rowput
console.log（this.fName.value、this.lName.value、this.type.value）
内部handleSubmit函数