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

IT技术 javascript jquery reactjs
2021-05-13 08:28:27

我在下面有一个react代码，我在一系列购物清单中迭代。我创建了一个状态更改和一个样式变量，单击时将一次只更改一个项目。

然而它没有用。出于某种原因，当我单击一个项目时，它会将所有项目都变为粗体。

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>

   );
  }
}

知道为什么这不起作用以及如何解决吗？附注。感谢有关如何改进我的代码的建议。

2个回答

将 css 变量存储在 state 中并在 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'));

您正在更改 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>
)
}
}
其它你可能感兴趣的问题
上一篇如何在登录或注册页面react-router中隐藏导航栏 下一篇React JS 在状态中存储一组 id