如何動態地添加行到表上按提交表單

-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

如何動態地添加行到表上按提交表單

回答

相關問題