反应 - 需要一些帮助，将数据保存到表格

Question

我有一个动态生成列标题和行的表，用户可以输入数据到行，当他们点击保存数据应该保存到该行，但在它不是将值保存到表中，而是将它们保存在我的数据库中。理想情况下，我希望它能够在单击保存按钮时将数据保存到行中，然后在该行中查看（如果这是有意义的）。

这里是我一起工作的代码（我知道这是在目前一团糟！）：

代码数据输入格式：

import React from 'react'; 
import AppStore from '../../stores/AppStore'; 

export default class RowForm extends React.Component { 
    state = {dataEntries: []}; 

    onChange = (event, element) => { 
     let dataEntries = this.state.dataEntries; 
     dataEntries[element] = event.target.value; 
     this.setState({dataEntries}); 
    }; 

    editStop =() => { 
     this.props.editStop(); 
    }; 

    handleSubmit = (e) => { 
     e.preventDefault(); 

     let access_token = AppStore.getToken(); 
     let id = AppStore.getTable().id; 
     let dataEntries = this.state.dataEntries; 
     let dataEntriesArray = []; 
     for (let key in dataEntries) { 
      if (dataEntries.hasOwnProperty(key)) { 
       dataEntriesArray.push({contents: dataEntries[key]}); 
      } 
     } 

     this.props.handleSubmit(access_token, id, dataEntriesArray); 

    }; 

    componentDidMount() { 
     let nameArray = AppStore.getTable().columns.map((obj) => { 
      return obj.name; 
     }); 

     let dataEntries = nameArray.reduce((obj, name) => { 
      obj[name] = null; 
      return obj; 
     }, {}); 
     this.setState({dataEntries}); 
    } 

    render() { 

     let {dataEntries} = this.state; 

     return (
      <tr> 
       {Object.keys(dataEntries).map((element) => { 
        return (
         <td key={element}><input type="text" className="form-control" id={element} placeholder="enter data" value={dataEntries[element]} onChange={event => this.onChange(event, element)} /></td> 
        ); 
       })} 
       <td> 
        <button className="btn btn-default" onClick={this.editStop}><i className="fa fa-ban"></i>Cancel</button> 
        <button className="btn btn-success" onClick={this.handleSubmit}><i className="fa fa-check"></i>Save</button> 
       </td> 
      </tr> 
     ); 
    } 

数据已输入并提交后， （它是像dataEntriesArray = [{contents：“value”}，{contents：“value”}，{contents：“value”}，{contents：“value”}]的对象数组。是我如何渲染桌子（这是我认为的问题）：

import React from 'react'; 
import TableHeader from './TableHeader.jsx'; 
import RowForm from './RowForm.jsx'; 
import {createRow} from '../../actions/DALIActions'; 
import AppStore from '../../stores/AppStore'; 

export default class Table extends React.Component { 
    state = {rows: [], isNew: false, isEditing: false}; 

    handleAddRowClickEvent =() => { 
     let rows = this.state.rows; 
     rows.push({isNew: true}); 
     this.setState({rows: rows, isEditing: false}); 
    }; 

    handleEdit = (row) => { 
     this.setState({isEditing: true}); 
    }; 

    editStop =() => { 
     this.setState({isEditing: false}); 
    }; 

    handleSubmit = (access_token, id, dataEntriesArray) => { 
     createRow(access_token, id, dataEntriesArray); 
    }; 

    render() { 

     let {rows, isNew, isEditing} = this.state; 

     let headerArray = AppStore.getTable().columns; 

     return (
      <div> 
       <div className="row" id="table-row"> 
        <table className="table table-striped"> 
         <thead> 
          <TableHeader /> 
         </thead> 
         <tbody> 
          {rows.map((row, index) => this.state.isEditing ? 
           <RowForm formKey={index} key={index} editStop={this.editStop} handleSubmit={this.handleSubmit} /> : 
           <tr key={index}> 
            {headerArray.map((element, index) => { 
             return (
              <td key={index} id={element.id}></td> 
             ); 
            })} 
            <td> 
             <button className="btn btn-primary" onClick={this.handleEdit.bind(this, row)}><i className="fa fa-pencil"></i>Edit</button> 
            </td> 
           </tr>)} 
         </tbody> 
        </table> 
       </div> 
       <div className="row"> 
        <div className="col-xs-12 de-button"> 
         <button type="button" className="btn btn-success" onClick={this.handleAddRowClickEvent}>Add Row</button> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

我现在使用的是助焊剂，现在想要继续使用它（我知道关于还原但我希望在开始重构我的代码之前让它工作在通量中）。我怀疑这是我的表格渲染方式的问题。

任何帮助将不胜感激，特别是例子！

谢谢你的时间！

Answer 1

看起来您可能想要将表格数据提取到您的商店，您的UI子元素触发更改事件，然后您的商店更新其数据并触发您的父组件可以侦听和更新的更改事件。

类似下面的简单的例子，其变异数组元素：

class Store extends EventEmitter { 
    constructor() { 
    super() 

    this.data = [ 'a', 'b', 'c' ] 
    } 

    onChange() { 
    this.emit('update', this.data) 
    } 

    mutate(index, value) { 
    this.data[ index ] = value 
    this.onChange() 
    } 
} 

var store = new Store() 

class ChildComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    // You probably want to use a dispatcher rather than directly accessing the store 
    onClick = event => { 
    store.mutate(this.props.index, this.props.value + 'Z') 
    } 

    render() { 
    return <button onClick={ this.onClick }>{ this.props.value }</button> 
    } 
} 

class ParentComponent extends React.Component { 
    constructor(props) { 
    super(props) 

    // You probably want to be smarter about initially populating state 
    this.state = { 
     data: store.data 
    } 
    } 

    componentWillMount() { 
    store.on('update', data => this.setState({ data: data })) 
    } 

    render() { 
    let cells = this.state.data.map((value, index) => <ChildComponent index={ index } value={ value } />) 

    return (
     <div> 
     { cells } 
     </div> 
    ) 
    } 
} 

为了简洁子组件在这里直接告诉店里来改变值，你可能会想要发送消息/动作和有实体店决定如何响应，关键仅仅是将商店数据传递给父组件，该组件会更新其状态并触发重新呈现。

这里的流程基本上是用户界面是愚蠢的，它只是呈现它从商店收集的数据，并发送一条消息告诉商店在检测到用户操作时更新/变异（在这种情况下，一个按钮按下但它听起来像需要某种输入），当商店中的数据发生变化时（或者也可以使用调度程序）更改事件，这会迫使UI重新呈现新状态。随着子组件在此阶段重新呈现，它们将填充新的数据状态，确保您的UI保持一致。