Reactjs 将值设置为state React js

我需要一些帮助

我还没有反应过来，所以我一直呆在这里。我共享了一个

sandbox

box链接。它包含一个表。如下

|玩具|颜色可用|成本可用|

现在一切都很好。但我想将表的数据保存如下

详细信息

状态应包含表的行值列表，

列值

应包含

可用颜色

和

可用成本

例如：

this.state.detail

like

detail: [
  {
      toy   : ...
      color : ...
      cost  : ...
  }
  {
      toy   : ...
      color : ...
      cost  : ...
  }
  ...
  ...
  ...
]

columnsValues: {
  color : boolean
  cost  : boolean
}

此.state.columns值类似

detail: [
  {
      toy   : ...
      color : ...
      cost  : ...
  }
  {
      toy   : ...
      color : ...
      cost  : ...
  }
  ...
  ...
  ...
]


columnsValues: {
  color : boolean
  cost  : boolean
}

任何专家请帮助我。在过去的几个小时里，我一直在挣扎

多谢各位

沙盒链接：
这不是一个确切的答案，但只是作为一个一般性的指导-您需要处于
状态的东西来捕获当前编辑的行内容的值，然后可以将其添加到最终列表中。这是假设一旦提交，您就不想修改最终列表

首先，具有一个初始状态，该状态存储正在编辑的当前行中的值

this.state = {
  currentData: {
    toy: '',
    color: '', 
    ..other props in the row
  }
  ...other state variables like dataSource etc
}

其次，更改输入框中的值时，必须更新
currentData
状态变量中的相应属性。我看到您已经有了一个
handleInputChange
函数

例如，对于对应于
toy
的输入框

 <input onChange={e => handleInputChange(e, 'toy')} ...other props />

最后，当您在
handleAddFunction
中按add时，您需要做两件事：

1） 在状态中使用已保存当前值的
currentData
，并将其推送到
dataSource
或
details
数组中

< p > 2）将<代码> CurrraseDATAs/COD>恢复到空白状态，准备跟踪下一行的更新。
  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count,
      ...this.state.newData,
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1, 
      currentData: {
        toy: '', 
        // other default values
      }
    });
  };


只要粘贴这段代码就行了

检查你的控制台，你会得到你想要的输出

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Checkbox, Input } from "antd";
import { PlusCircleOutlined, MinusCircleOutlined } from "@ant-design/icons";

const { Column } = Table;

class ToyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [
        {
          key: 0,
          toy: "asdf",
          color: "black",
          cost: "23"
        }
      ],
      count: 0,
      colorSwitch: false,
      costSwitch: false,
      columnsValues: {
        color: true,
        cost: true
      },
      detail: []
    };
  }

  componentDidMount(){
    const count = this.state.dataSource.length;
    this.setState({
      count
    })
  }

  handleAdd = () => {
    const { dataSource } = this.state;
    let count = dataSource.length;
    const newData = {
      key: count,
      toy: "",
      color: "",
      cost: ""
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count
    });
  };
  handleDelete = key => {
    const dataSource = [...this.state.dataSource];
    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
  };
  onChangecolor = (e, record) => {
    let dataSource = this.state.dataSource;
    let key = record.key;
    dataSource[key].color = e.target.value;
    this.setState({
      dataSource
    });
  };
  onChangeCost = (e, record) => {
    let dataSource = this.state.dataSource;
    let key = record.key;
    dataSource[key].cost = e.target.value;
    this.setState({
      dataSource
    });
  };
  onChangeToy = (e, record) => {
    console.log("I am inside handleInputChange", e.target.value, record);
    let dataSource = this.state.dataSource;
    let key = record.key;
    dataSource[key].toy = e.target.value;
    this.setState({
      dataSource
    });
  };

  checkColor = e => {
    this.setState({ colorSwitch: e.target.checked });
  };

  checkCost = e => {
    this.setState({ costSwitch: e.target.checked });
  };
  render() {
    const { dataSource } = this.state;
    console.log(dataSource);

    return (
      <Table bordered pagination={false} dataSource={dataSource}>
        <Column
          title="Toy"
          align="center"
          key="toy"
          dataIndex="toy"
          render={(text, record) => (
            <Input
              component="input"
              className="ant-input"
              type="text"
              value={record.toy}
              onChange={e => this.onChangeToy(e, record)}
            />
          )}
        />

        <Column
          title={() => (
            <div className="row">
              Color Available
              <div className="col-md-5">
                <Checkbox size="small" onChange={this.checkColor} />
              </div>
            </div>
          )}
          align="center"
          dataIndex="color"
          render={(text, record) => (
            <Input
              disabled={!this.state.colorSwitch}
              value={record.color}
              onChange={e => this.onChangecolor(e, record)}
              component="input"
              className="ant-input"
              type="text"
            />
          )}
        />

        <Column
          title={() => (
            <div className="row">
              Cost Available
              <div className="col-md-5">
                <Checkbox size="small" onChange={this.checkCost} />
              </div>
            </div>
          )}
          align="center"
          dataIndex="color"
          render={(text, record) => (
            <Input
              disabled={!this.state.costSwitch}
              value={record.cost}
              onChange={e => this.onChangeCost(e, record)}
              component="input"
              className="ant-input"
              type="text"
            />
          )}
        />

        <Column
          render={(text, record) =>
            this.state.count !== 0 && record.key + 1 !== this.state.count ? (
              <MinusCircleOutlined
                onClick={() => this.handleDelete(record.key)}
              />
            ) : (
              <PlusCircleOutlined onClick={this.handleAdd} />
            )
          }
        />
      </Table>
    );
  }
}

ReactDOM.render(<ToyTable />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{表，复选框，输入}；
从“@ant design/icons”导入{pluscircloutline，MinusCircleOutlined}；
const{Column}=表；
类ToyTable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据源：[
{
关键字：0，
玩具：“asdf”，
颜色：“黑色”，
费用：“23”
}
],
计数：0，
颜色开关：false，
costSwitch:false，
列值：{
颜色：对，
成本：对
},
详情：[]
};
}
componentDidMount（）{
常量计数=this.state.dataSource.length；
这是我的国家({
计数
})
}
handleAdd=（）=>{
const{dataSource}=this.state；
let count=dataSource.length；
常数newData={
关键：计数，
玩具：“，
颜色：“，
成本：“
};
这是我的国家({
数据源：[……数据源，新数据]，
计数
});
};
handleDelete=键=>{
const dataSource=[…this.state.dataSource]；
this.setState（{dataSource:dataSource.filter（item=>item.key！==key）}）；
};
onChangecolor=（e，记录）=>{
让dataSource=this.state.dataSource；
让key=record.key；
数据源[key].color=e.target.value；
这是我的国家({
数据源
});
};
onChangeCost=（e，记录）=>{
让dataSource=this.state.dataSource；
让key=record.key；
数据源[key]。成本=e.target.value；
这是我的国家({
数据源
});
};
onChangeToy=（e，记录）=>{
log（“我在handleInputChange中”，例如target.value，record）；
让dataSource=this.state.dataSource；
让key=record.key；
数据源[key].toy=e.target.value；
这是我的国家({
数据源
});
};
checkColor=e=>{
this.setState（{colorSwitch:e.target.checked}）；
};
checkCost=e=>{
this.setState（{costSwitch:e.target.checked}）；
};
render（）{
const{dataSource}=this.state；
console.log（数据源）；
返回(
(
这个.onChangeToy（e，record）}
/>
)}
/>
(
可用颜色
)}
align=“居中”
dataIndex=“颜色”
呈现={（文本、记录）=>(
this.onChangecolor（e，record）}
component=“输入”
className=“ant输入”
type=“text”
/>
)}
/>
(
可用成本
)}
align=“居中”
dataIndex=“颜色”
呈现={（文本、记录）=>(
此.onChangeCost（e，记录）}
component=“输入”
className=“ant输入”
type=“text”
/>
)}
/>
this.state.count！==0&&record.key+1！==this.state.count(
this.handleDelete（record.key）}
/>
) : (
)
}
/>
);
}
}
render（，document.getElementById（“容器”）；
看起来您已经在
this.state.detail
中将所需内容保存为
this.state.dataSource
？很抱歉问了一些愚蠢的问题。但是
dataSource
没有我在表行中输入的值。您没有任何初始状态，为什么不设置它？我说的是我们在行的文本框中输入的值。我们从初始状态得到的结果是什么？@Rich我很接近你的解决方案。谢谢你的帮助。我会检查的。：）感谢您提供的解决方案。：）很高兴能帮忙：）。我不得不这么做，因为我已经告诉过你我会在两小时内给你回复的。谢谢你的关心。但是当我们删除一行（右边的减号图标），然后添加一个