Question

当我在文本区域中键入内容，然后单击按钮时，此新元素将存储在数组中并显示在我的react应用程序的列表中。我希望在单击数组元素时将其交叉。

我编写了一个函数，当我单击元素时，将“ crossed”的状态更改为相反的状态，然后元素的样式将根据其是真还是假而改变。

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

您的验证涉及所有元素，有必要让每个元素大陆都经过this.state.cross来知道应该显示还是不显示哪个元素。

您可以将此元素添加到todoList数组中，以便可以在显示每个元素时进行测试。

您将看到类似的内容

state = {
    todolist: [],
    crossed: false
  }

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

cross(index) {
   let help_todo = this.state.todolist;
   help_todo[index][1] = !help_todo[index][1];
this.setState({ todolist: help_todo });
}

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

    <ul>
      {this.state.todolist.map((e) => {
      return  <Item
          item={e}
          onClick={(e) => this.cross(e.indexOf())}
           />}
          )
          }
    </ul>
    }
  </div>

);

}

尝试一下：

Answer 2

对于每个对象，您都应该有一些区别键，

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>
)

OnClick，将样式应用于一个数组元素

2 个答案: