Question

****************************************************我有反应组件，它不能按预期工作，我希望按一下li元素，只有该元素会改变颜色，但是当我单击它时，具有相同索引的每个元素都会改变颜色：*** *

因此，当我单击它时，地图函数后的每个元素question.answersArray [0]都会改变颜色，我在做什么错？

import React, { Component } from 'react'
import {connect} from 'react-redux'
import './Questions.css'
import {fetchProducts1} from './redux_store/actions/actionfetchcontent'


class Questions extends Component {  
    constructor(props){
        super(props)
        this.state ={
          bgColor: '',
          clicked: false,
        }
        // this.handleClick = this.handleClick.bind(this);
      }
      handleClick = e => {
        console.log(e.currentTarget.dataset.id );
        this.setState({
          bgColor: 'green',
          clicked: true
        })

      }



    componentDidMount() {
        this.props.dispatch(fetchProducts1());
      }
    fetchFunction () {
        if (this.props.questionsFetch === undefined){
          return <div>Followers Undefined...</div>;
        }
        return this.props.questionsFetch.map((question) => {
            return (
                <div className='questions_main'>
                <br />
                    <article                     
                     >{question.question}
                     <br />
                     </article>
                     <br />
                     <div className="answers"> 
                     <label for="answer-select"></label>
                     <br />
                    <ul id="answer-select">
                            <li data-id="1"
                                onClick={this.handleClick}
                            style={{ backgroundColor: this.state.bgColor }}
                            ><span>A</span><p>{question.answersArray[0]}</p>
                            </li>
                    <li data-id="2"><span>B</span> <p>{question.answersArray[1]}</p></li>
                    <li data-id="3"><span>C</span> <p>{question.answersArray[2]}</p></li>
                    <li data-id="4"><span>D</span> <p>{question.answersArray[3]}</p></li>
                    </ul>
                    </div>
                </div>
            )
        })
    }






    render() {
        return (
            <div>
                {this.fetchFunction()}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    questionsFetch: state.fetched.items,
    loading: state.fetched.loading,
    error: state.fetched.error
  });



 export default connect(mapStateToProps)(Questions);

Answer 1

这里的问题是，您只存储一个背景色值，并且在单击的情况下，只需在状态下填写该字段，这样就不会将颜色映射到单独的li元素。 / p>

根据这些要求

我希望点击li元素，只有该元素会改变颜色

因此，要实现它，您必须在活动li元素的状态索引中存储

类似的事情应该起作用：

<ul id="answer-select">
  { 
    question.answersArray.map((answer, index) => (
      <li 
        data-id={index}
        onClick={() => this.setState({ activeIndex: index })}
        style={ index === this.state.activeIndex ? { backgroundColor: this.state.bgColor } : null}
      >
        <span>{ String.fromCharCode(65 + index) }</span><p>{ answer }</p>
      </li>
    )) 
  }
</ul>

如何在React中从数组更改特定元素的样式？

1 个答案: