我有一个基本的待办事项列表，但我不确定如何为每个待办事项添加删除按钮。在传统的 DOM 编程中，我只会向按钮添加一个事件监听器并删除父项和相应的数组索引数据。对于 React，我不太确定如何构建它。
我的问题是:
- 让它正常工作
知道如何(以及是否)我应该为此功能创建一个新组件。
var TodoItems = React.createClass({ render: function() { var attr = this.props var todoEntries = attr.entries; var listItems = todoEntries.map((item) => { return <li key={item.key}>{item.text} <input type="button" value="DELETE"></input></li> }); return ( <ul className="theList"> {listItems} </ul> ); } }); var TodoList = React.createClass({ getInitialState: function() { return { items: [] }; }, addItem: function(e) { var itemArray = this.state.items; itemArray.push({ text: this._inputElement.value, key: Date.now() }); this.setState({ items: itemArray }); this._inputElement.value = ""; e.preventDefault(); }, render: function() { return ( <div className="todoListMain"> <div className="header"> <form onSubmit={this.addItem}> <input ref={(a) => this._inputElement = a} placeholder="enter task"> </input> <button type="submit">add</button> </form> </div> <TodoItems entries={this.state.items}/> </div> ); } }); var destination = document.querySelector("#container"); ReactDOM.render( <div> <TodoList/> </div>, destination);
最佳答案
先决条件理解
我相信要开始回答您的问题，您需要对 React 背后的核心概念有一定的了解。
Your view is a representation of your data
您的 React 组件描述如何向用户呈现数据。 因此，如果您希望更改 View 中的某些内容，您应该更改数据。
几乎在所有情况下，您都不需要考虑 DOM 操作。 React 将根据数据的变化改变您的 View 。
In conventional DOM programming I would just add an event listener to the button and delete the parent and respective array index data.
进一步阅读
解决方案
const { Component } = React;
const { render } = ReactDOM;
const defaultList = [
'Item 1',
'Item 2',
'Item 3',
];
const List = (props) => (
<ul>
{props.items.map((item, index) => (
<li key={index}>
{item}
<br />
<button onClick={() => props.removeItem(index)}>Remove</button>
</li>
))}
</ul>
);
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: defaultList,
};
}
removeItem(removeIndex) {
this.setState((state) => ({
...state,
items: this.state.items.filter((item, index) => index !== removeIndex)
}))
}
reset() {
this.setState((state) => ({
...state,
items: defaultList,
}))
}
render() {
return (
<div>
<List
items={this.state.items}
removeItem={this.removeItem.bind(this)}
/>
<button onClick={this.reset.bind(this)}>Reset</button>
</div>
);
}
}
render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="root"></div>
<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>
</body>
</html>现在我们已经了解了先决条件，我们可以逐步解决一个问题。
您的数据是一个项目列表，存储在某个地方(可以是组件状态或 Redux 存储)。我们将在我们的示例中使用组件状态来简化事情:
const defaultList = [
'Item 1',
'Item 2',
'Item 3',
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: defaultList,
};
}
...
}
正如我们所知， View 是状态的表示，要删除 View 中的项目，我们必须从当前状态中删除该项目。为了实现这一点，我们可以定义一个函数，该函数将接受一个参数来描述要删除的项目(在我们的例子中它是一个索引，但它也可以是一个项目对象 ID，具体取决于你的列表是如何建模的)。删除它是过滤掉索引与提供的参数匹配的项目的情况。创建并设置一个新的状态对象。
class App extends Component {
...
removeItem(removeIndex) {
this.setState((state) => ({
...state,
items: this.state.items.filter((item, index) => index !== removeIndex)
}))
}
...
}
此函数通过其 props 传递给 List 组件，并在每个按钮的 onClick 处理程序中调用。
const List = (props) => (
<ul>
{props.items.map((item, index) => (
<li key={index}>
{item}
<br />
<button onClick={() => props.removeItem(index)}>Remove</button>
</li>
))}
</ul>
);
关于javascript - React - 创建一个删除按钮，删除它的 DOM 父项和相应的状态项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47135473/