Question

我有一张桌子，它的前三行是硬编码的。在前三行之后，我想在表中添加新对象。我为它编写代码但是当我输入新数据时，我的旧数据将从表中删除并显示新数据。我希望它在它的位置，并希望在它之后准确添加新数据。这是我的州的代码

constructor(props)
{
    super(props)
    {   

        this.state={
            id:'',
            name:'',
            birth:'',
            data:[
                {
                id:'1',
                name:'Muhammad Ali jinnah',
                dateofBirth:'1876'
                },
                {
                    id:'2',
                    name:'Allama Iqbal',
                    dateofBirth:'1877'
                },
                {
                    id:'3',
                    name:'Ahmad Bilal',
                    dateofBirth:'1992'
                }
            ],

        }
    }

在那种状态下，我有一些对象数组，我有硬编码和状态数据，我用来从我的输入框中获取数据..输入框用于从用户获取数据并在表中添加数据并提交用于添加数据在表格中使用函数..

这里是我的句柄提交的代码，我想为新对象设置状态

 handleSubmit(event) {
    console.log('A ID:name and birth was submitted: ' + this.state.id,this.state.name,this.state.birth);
    const { id, name, birth } = this.state;    
    const newdata = {
      id: id,
      name: name,
      dateofBirth: birth 
    };

    this.setState(prevState => ({
      data: [prevState.data,newdata ]
    }));
    console.log("new array",this.state.data)
    event.preventDefault();
  }

我想改变它的状态，但我也希望我的前三行是硬编码的

Answer 1

以下是应该解决您问题的伪代码。

plt.show()

Answer 2

如果我理解正确...你应该能够创建一个包含3个静态行的渲染，然后根据状态（this.state.data）中的对象动态追加行。例如，见下文。

render {
    return (
        <table>
            <tr><td>sample1</td></tr>
            <tr><td>sample2</td></tr>
            <tr><td>sample3</td></tr>
            {
                this.state.data.map((dataElement) => {
                    <tr><td>{dataElement.name}</td></tr>
                });
            }
        </table>
    )
}

Answer 3

发生错误是因为您没有使用扩展运算符插入数组。

当你使用类似的东西时：

this.setState(prevState => ({
  data: [prevState.data,newdata ] //This is wrong
}));

prevState.data成为新数组的第一个元素，新数据成为第二个，而您可以将spread operator用于新数组，如：

this.setState(prevState => ({
  data: [...prevState.data,newdata ]
}));

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      name: "",
      birth: "",
      data: [
        {
          id: "1",
          name: "Muhammad Ali jinnah",
          dateofBirth: "1876"
        },
        {
          id: "2",
          name: "Allama Iqbal",
          dateofBirth: "1877"
        },
        {
          id: "3",
          name: "Ahmad Bilal",
          dateofBirth: "1992"
        }
      ]
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }
  handleSubmit(event) {
    console.log('A ID:name and birth was submitted: ' + this.state.id,this.state.name,this.state.birth);
    const { id, name, birth } = this.state;    
    const newdata = {
      id: id,
      name: name,
      dateofBirth: birth 
    };

    this.setState(prevState => ({
      data: [...prevState.data,newdata ]
    }));
    console.log("new array",this.state.data)
    event.preventDefault();
  }
  render() {
    return (
      <main>
        <form onSubmit={this.handleSubmit}>
          <input name='id' type='number' value={this.state.id} onChange={this.handleInputChange} placeholder='ID' />
          <input name='name' value={this.state.name} onChange={this.handleInputChange} placeholder='Name' />
          <input name='birth' type='date' value={this.state.birth} onChange={this.handleInputChange} placeholder='Date of Birth' />
          <button type='submit'>Add New</button>
        </form>
        <table className='content'>
          <tbody>
          {
            this.state.data.map(item=>{
              return (
                <tr>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.dateofBirth}</td>
                </tr>
              );
            })
          }
          </tbody>
        </table>
      </main>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 4

让temp = this.state.data; 温度= temp.push（newdata）

将这些行添加到handleSubmit（）中，并使用setState方法将temp设置为您的状态。

想要在反应js中的表中添加新对象

4 个答案: