lot yeni kayıtlar ekleme ve silme nasıl tepki

oy
0

Ben sadece masaya (bu durumda 3) birkaç yeni kayıtlar ekleyebilir ve sonra tüm çizgi silmeniz gerekir, tepki çalışmaya başladı, ancak yalnızca tek bir alandan veri eklemek mümkün olduğu ortaya çıkıyor

tek bileşenli, o zaman bir get cevap görüntülenir boş ve sonra ben verilerle aynı şeyi ve bunları silmek istediğiniz

İşte benim kodudur

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;
Oluştur 14/04/2018 saat 16:46
kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Uyguladınız mı silme işlevi:

: Çalışma kodu Ödemeye 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"))
Cevap 14/04/2018 saat 17:38
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more