Question

我正在做一个班级项目，我有点卡住了。在我的应用程序中，我希望能够更改已选择的文本的颜色。因此，在这种情况下，我想点击的'h2'标签，如果用户选择它，则变为红色。

我还是新手做出反应，所以想办法绑定东西有点困难。我也不想设置一个新状态，因为有多个'h2'标签，所以如果更改了一个，我担心的是所有其他标签也会改变。

以下是我现在的代码：

import React, { Component } from 'react';
import UpdateReasons from '../../actions/updateReasons.js';
import { Link } from 'react-router';
// import ReasonStyle from './reasons.css'; note: imported via index.html // style folder
import FontAwesome from 'react-fontawesome';

class ReasonsHappy extends Component {
  constructor() {
    super();
    this.state = {
      reasons: []
    }
  }

  reply_click(clicked_value) {
    const reasons = [];
    reasons.push(clicked_value)
    this.setState({
      reasons: this.state.reasons.concat(reasons)
    })

  }

  render() {


    return (

      <div className='buttonDiv {ReasonStyle}'>

        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Great Culture")}} type="button" className="btn btn-lg reason" value={"Great Culture"}> <b> Great Culture </b> </h2>
        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Flexible Managers")}} type="button" className="btn btn-lg reason" value={"Flexible Managers"}> <b> Flexible Managers </b> </h2>
        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Friendly Co-workers")}} type="button" className="btn btn-lg reason" value={"Friendly Co-workers"}> <b> Friendly Co-workers </b> </h2>
        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Upbeat Work Environment")}} type="button" className="btn btn-lg reason" value={"Upbeat Work Environment"}> <b> Upbeat Work Environment </b> </h2>
        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Work is Appreciated")}} type="button" className="btn btn-lg reason" value={"Work is Appreciated"}> <b> Work is Appreciated </b> </h2>
        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Flexible Work Hours")}} type="button" className="btn btn-lg reason" value={"Flexible Work Hours"}> <b> Flexible Work Hours </b> </h2>
        <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("New Opportunities")}} type="button" className="btn btn-lg reason" value={"New Opportunities"}> <b> New Opportunities </b> </h2>

        <br></br>

        <p id='submitP'>
          <Link to="/stats">
            <FontAwesome name="arrow-circle-right" id="arrow" onClick={() => {UpdateReasons(this.state.reasons)}}/>
          </Link>
        </p>
      </div>
    )
  }
};


export default ReasonsHappy;

任何方向都会很棒。谢谢！

Answer 1

您应该仔细阅读并了解react components以及如何传递props和handlers。您无法将props或无本机属性传递给真正的DOM元素。并阅读如何thinking in react

您可以创建可以接受的组件以及id，active和onClick处理程序，该处理程序会将已单击的当前项id传递回父级。父级将此id设置为其状态，并将分别有条件地传递active个道具。

这是一个很小的运行示例，可以帮助您入门：

class Item extends React.Component {
  handleClick = () => {
    const { itemId, onClick } = this.props;
    onClick(itemId);
  }
  render() {
    const { text, active } = this.props;
    return (
      <div className={`header ${active && 'active'}`} onClick={this.handleClick}>{text}</div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItem: 0,
      items: [
        {
          text: 'item 1',
          id: 1
        },
        {
          text: 'item 2',
          id: 2
        },
        {
          text: 'item 3',
          id: 3
        },
        {
          text: 'item 4',
          id: 4
        },
      ]
    }
  }

  onItemClick = (id) => {
    this.setState({ activeItem: id });
  }

  render() {
    const { items, activeItem } = this.state;
    return (
      <div >
        {
          items.map((item) => {
            return (
              <Item
                key={item.id}
                text={item.text}
                itemId={item.id}
                onClick={this.onItemClick}
                active={item.id === activeItem}
              />
            )
          })
        }
      </div>
    );
  }

}


ReactDOM.render(<App />, document.getElementById('root'));

.header{
  margin: 10px 0;
  padding: 15px;
  box-shadow: 0 0 2px 1px #333;
  cursor: pointer;
}

.active{
  color: #fff;
  background-color: #333;
}

<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>
<div id="root"></div>

React / Html：更改已选择的颜色。

1 个答案: