Question

我刚刚开始研究反应，我需要在表中添加一些新记录（在本例中为3）然后删除整行，但事实证明只能从一个字段中添加数据< / p>

一个组件为空，然后显示获取答案，然后我想对我的数据执行相同操作并删除它们

这是我的代码

import React, { Component } from 'react';

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            dataItems: []
        }
    }
componentDidMount() {
    fetch('example-tech.com')
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({data: responseJson});
        })
}

addItem(value) {
    let newListItems = this.state.dataItems.slice();
    newListItems.push(value);

    this.setState({
        dataItems : newListItems
    });
}

render() {
    return (
        <div>
            <text />
            {/*fromGet*/}
            {this.state.data.map( function (record, index) {
                return(
                    <div className='form__row' key={index}>
                        <Hello
                            firstname={record.data.firstname}
                            lastname={record.data.lastname}
                            telegram={record.data.telegram}
                        />
                    </div>
                )
            })}
 {/*myNewRecords*/}
            {this.state.dataItems.map(function (item ,index) {
                return (
                    <Hello key={index} firstname={item} />
                );
            })}

            <AddItem addItem={this.addItem.bind(this)} />
        </div>
    )
}
}

class Hello extends React.Component {
    render() {
        return <div className='form__row'>
            <p className='form__input' > firstname: {this.props.firstname} </p>
            <p className='form__input'> lastname: {this.props.lastname} </p>
            <p className='form__input'> telegram: {this.props.telegram} </p>
            <button> Delete </button>
        </div>;
    }
}

class AddItem extends React.Component{
    handleClick(){
        this.props.addItem(this.item.value);
    }
    render(){
        return (
            <div className='form__row'>
                <div>
                    <label >firstname</label>
                    <input className='form__input'  type="text" ref={item => this.item=item} />
                </div>
                <button onClick={this.handleClick.bind(this)}> Add new records</button>
            </div>
        );
    }
}

export default Table;

Answer 1

已实施删除功能：

签出工作代码：https://jsfiddle.net/n5u2wwjg/25420/

class Table extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            data: [],
            dataItems: []
        }
    }
  componentDidMount() {
    fetch('example-tech.com')
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({data: responseJson});
        })
}

deleteItem(index) {

  let array = this.state.dataItems;
  array.splice(index, 1);
  this.setState({dataItems: array });
  console.log("coming here")
}

addItem(value) {
    let newListItems = this.state.dataItems.slice();
    newListItems.push(value);

    this.setState({
        dataItems : newListItems
    });
}

render() {
    return (
        <div>
            <text />
            {/*fromGet*/}
            {this.state.data.map( function (record, index) {
                return(
                    <div className='form__row' key={index}>
                        <Hello
                            firstname={record.data.firstname}
                            lastname={record.data.lastname}
                            telegram={record.data.telegram}
                            deleteItem={this.deleteItem.bind(this, index)} 
                        />
                    </div>
                )
            })}
 {/*myNewRecords*/}
            {this.state.dataItems.map(function (item ,index) {
                return (
                    <Hello deleteItem={this.deleteItem.bind(this, index)}  key={index} firstname={item} />
                );
            }, this)}

            <AddItem addItem={this.addItem.bind(this)} />
        </div>
    )
}
}

class Hello extends React.Component {
  handleOnClick() {
    this.props.deleteItem(this.props.key);
  }

    render() {
        return <div className='form__row'>
            <p className='form__input' > firstname: {this.props.firstname} </p>
            <p className='form__input'> lastname: {this.props.lastname} </p>
            <p className='form__input'> telegram: {this.props.telegram} </p>
            <button onClick={this.props.deleteItem}> Delete </button>
        </div>;
    }
}

class AddItem extends React.Component{
    handleClick(){
        this.props.addItem(this.item.value);
    }
    render(){
        return (
            <div className='form__row'>
                <div>
                    <label >firstname</label>
                    <input className='form__input'  type="text" ref={item => this.item=item} />
                </div>
                <button onClick={this.handleClick.bind(this)}> Add new records</button>
            </div>
        );
    }
}

ReactDOM.render(<Table />, document.querySelector("#app"))

反应如何添加新的记录和删除

1 个答案: