OnClick，在一个数组元素上应用样式

Question

当我在 textarea 中输入内容，然后单击按钮时，这个新元素会存储在一个数组中，并显示在我的 react 应用程序的列表中。我希望在单击数组元素时交叉它们。

我写了一个函数，当我点击元素时，将“交叉”的状态改变为相反的状态，然后元素的样式会根据它是真还是假而改变。

app.js：

import React from 'react';
import Tasks from './tasks.js';
import Item from './component.js';
import './App.css';



class App extends React.Component {
  state = {
    todolist: [],
    crossed: false
  }

  addData(val) {
    this.setState({ todolist: this.state.todolist.concat(val) },
      () => console.log(this.state.todolist))
  }


  cross() {
    this.setState({ crossed: !this.state.crossed },
      () => console.log(this.state.crossed))
  }

  render() {
    return (
      <div className="App">
        <Tasks onClick={value => this.addData(value)} />

        {
          (this.state.crossed) ? (<ul>
          {this.state.todolist.map((e) => {
          return  <Item
              item={e}
              onClick={(e) => this.cross(e)}
              style={{ textDecoration : 'line-through' }} />}
              )
              }
        </ul>) : (
          <ul>
          {this.state.todolist.map((e) => {
           return <Item
              item={e}
              onClick={(e) => this.cross(e)}
               />}
              )
              }
        </ul>
        )
        }
      </div>

    );
  }
}



export default App;

component.js：

import React from 'react'

class Item extends React.Component{ 
 render(){ return(
        <li onClick={this.props.onClick} style={this.props.style}>{this.props.item}
        </li>
    );
}}
export default Item

tasks.js：

import React from 'react'


class Tasks extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }
    handleChange = e => {
        this.setState({ value: e.target.value })
    }

    render() {
        return (<div>
            <textarea value={this.state.value} onChange={this.handleChange} ></textarea>
            <button onClick={() => this.props.onClick(this.state.value)}>Add task</button>
        </div>)

    }

}



export default Tasks

我希望每个元素在我单击它时自行交叉，但是当我单击其中任何一个元素时，所有元素都会交叉。

Answer 1

您应该为每个对象设置一些键来区分，

addData(val) {
    const tempObj = {
        val: val,
        crossed: false
    }
    this.setState({ todolist: this.state.todolist.concat(tempObj) },
        () => console.log(this.state.todolist))
}

现在您将为每个对象交叉键。我还没有运行代码，但这应该可以工作。

cross = e => {
    e.crossed = !e.crossed;
}

(
<ul>
    {this.state.todolist.map(e => {
    return  <Item
        item={e}
        onClick={(e) => this.cross(e)}
        style={e.crossed && { textDecoration : 'line-through' }} />} // use ternary operator or this kind of && condition here
        )
        }
</ul>
)