如何动态地添加行到表上按提交表单

-1

我需要帮助建立在当用户按下提交按钮行会自动添加的部分。现在有4个字段和一个提交按钮。下面有一个表格显示所有的数据。所以当有人在文本字段中输入数据并按下提交时，应该将这些数据存储到'genData'中，之后，它应该在表中创建一个新行，并且人们应该能够看到它应该在当前已显示的数据。如何动态地添加行到表上按提交表单

const genData = [ 
{ firstName: "foo", lastName: "boo", type: "male", email: "[email protected]"} 

]; 

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

来源

2017-06-23 John Berry

我建议你待办事项的反应的例子读取任何（许多），因为他们都有你感兴趣的功能。 –

变化：

商店中的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: "[email protected]" 
      } 
     ] 
    } 
    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: "[email protected]" 
      } 
     ] 
    } 
    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> 
    ); 
    } 
}

来源

2017-06-23 08:54:41

当我按下提交它不会重新呈现和更新表。它没有做任何事情 –

@JohnBerry抱歉，发生在像线handlesubmit功能的错字：'让genData = this.state.slice（）;'检查更新的代码专门'handlesubmit'功能使用这一行：'让genData = this.state.genData.slice（）;'它会工作。 –

是固定的错误，但问题是，它在表中创建一个空行，它不会从现场取数据，并把它放在表行中 –

您需要在按钮上安装事件监听器/处理程序，以在点击时执行某些操作。在React组件中，您通常会通过onClick prop来传递函数，但它取决于组件。

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

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

得到你需要让所有的<TextField />组件的价值和推动他们的新数据进入genData阵列。我也推荐这个阵列是内部state，并使用this.setState()进行更新。

来源

2017-06-23 07:32:06 vassiliskrikonis

如何动态地添加行到表上按提交表单

回答

相关问题