Question

我在下面有一个反应代码，我在一个购物清单列表中进行迭代。我创建了一个状态更改和一个样式变量，它在单击时一次只能更改一个项目。

然而它没有用。出于某种原因，当我点击一个项目时，它们全部变为粗体。

const App = () => (
    <div><GroceryListItem /></div>
);

class GroceryListItem extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return (
      <div><GroceryList groceryItems={['Cucumber', 'Kale']}/></div>
    );
  }
}

class GroceryList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      done: false
    };
  }

  onClickItem(){
    this.setState({
        done: !this.state.done
      });
  }

 render(){

  var style = {
      fontWeight: this.state.done ? 'bold' : 'normal'
    };

   return (
    <ul>
      {
        this.props.groceryItems.map(item => <li style={style} onClick={this.onClickItem.bind(this)} key={item}>{item}</li>)
      }
    </ul>

   );
  }
}

知道为什么这不起作用以及如何解决它？ PS。关于如何改进我的代码的建议值得赞赏。

Answer 1

您正在更改状态onClick，并更改完整渲染功能可访问的样式变量。您只需要知道点击了哪个元素并将其存储在您的状态中。您可以尝试以下方法。

class GroceryList extends React.Component {
constructor(props){
  super(props);
  this.state = {
    selected: null
  };
}

onClickItem (item) {
  this.setState({
    selected: item
  })
}

render(){
return (
       <ul>
       {
        this.props.groceryItems.map(item => <li style={{'fontWeight': this.state.selected === item ? 'bold' : 'normal'}} onClick={this.onClickItem.bind(this, item)} key={item}>{item}</li>)
       }
    </ul>
)
}
}

Answer 2

将css变量存储在状态中并更改onClick

import React from 'react'; 
import ReactDOM from 'react-dom';

const App = () => (
<div><GroceryListItem /></div>
);

class GroceryListItem extends React.Component{
constructor(props){
 super(props);
}

render(){
return (
   <div><GroceryList groceryItems={['Cucumber', 'Kale']}/></div>
  );
 }
}

class GroceryList extends React.Component {
constructor(props){
super(props);
this.state = {
  done: false,
  style: "normal"
 };
}

onClickItem(item){
let style = {
    [item]: "bold"
}
this.setState({
    done: !this.state.done,
    style: style
  },() => {});
 }

render(){
return (
<ul>
  {
    this.props.groceryItems.map(item => {

        {console.log(this.state.style[item],"this.state")}
        return (<li style={{fontWeight: this.state.style[item] || "normal"}} id={item} onClick={this.onClickItem.bind(this,item)} key={item}>{item}</li>
        )
    })
}
</ul>

 );
}
}

ReactDOM.render(<App />, document.getElementById('root'));

如何在单击方法中更改项目的字体权重 - React

2 个答案: