html点击按钮清空元素,在按钮上添加和删除HTML元素点击反应

const Row = function(props){

const {checked, value, onChange, onChecked} = props;

return (

type="checkbox"

checked={checked}

onChange={onChecked}

/>

);

}

class App extends React.Component {

constructor(props){

super(props);

this.state = {

rows: [

{value: 'row1', checked: false},

{value: 'row2', checked: true},

{value: 'row3', checked: false},

]

};

}

updateValue(e, idx){

const rows = this.state.rows;

rows[idx].value = e.target.value;

this.setState({

rows,

});

}

onChecked(idx){

const rows = this.state.rows;

rows[idx].checked = !rows[idx].checked;

this.setState({

rows,

});

}

addRow(){

const rows = [...this.state.rows,

{value:'', checked: false}

];

this.setState({

rows,

});

}

deleteRows(){

this.setState({

rows: this.state.rows.filter((e, i) => !e.checked)

});

}

render(){

return(

{this.state.rows.map((row, idx) => {

return(

key={idx}

value={row.value}

checked={row.checked}

onChange={(e) => this.updateValue(e,idx)}

onChecked={() => this.onChecked(idx)}

/>

)

})

}

this.addRow()}>

add

this.deleteRows()}>

delete

);

}

}

ReactDOM.render(

,

document.getElementById('app')

);