Question

当我点击时我试图更改图像但是，当我点击之前点击的按钮时仍然与红色相同。我试图只让一个按钮变为红色，而其他按钮应该是黑色的（如单选按钮）。

这是我的代码，请帮忙。

import React from 'react';
import './App.css';
import redlogo  from "./redlogo.png";
import blacklogo  from "./blacklogo.png";

class   App  extends React.Component {
  constructor(props) {
    super(props);
    this.state = {src:blacklogo};
  }

  changeImageSource(index,event) {
    console.log('button is clicked at index ' + index)
    event.target.src = redlogo;
  }

  render() {
    let tracks = ["button 1", "button 2", "button 3", "button 4", "button 5", "button 6 ", "button 7", "button 8", "button 9",];

    return( 
        <div className="scrollmenu" id="scrolldiv"  >
          { console.log(tracks)}
          {tracks.map((item,index)=>
                  <button id={index} key={index}
                   onClick={this.changeImageSource.bind(this,index)}
                  > 
                    <figure>
                      <img  className='img' src={this.state.src} />
                      <figcaption>{item}</figcaption>
                    </figure>
                  </button>   
              )}
       </div>
       )
      }
  }
export default  App ;

Answer 1

首先，您的代码存在严重的逻辑错误。我从你的问题中理解的是，你一次只想要一个红色的按钮。如果是这样，您可以指定一个状态，以保存当前需要为红色的按钮索引。内部构造函数：//create a case class equivalent to your Cassandra table case class Schema(collecttime: Double, sbnid: Double, enodebid: Double, rackid: Double, shelfid: Double, slotid: Double, channelid: Double, c373910000: Double, c373910001: Double, c373910002: Double) object test { import com.datastax.spark.connector._, org.apache.spark.SparkContext, org.apache.spark.SparkContext._, org.apache.spark.SparkConf def main(args: Array[String]): Unit = { val conf = new SparkConf(true).set("spark.cassandra.connection.host", "localhost") val sc = new SparkContext(conf) val nameTable = "artport" val ligne = "20171,16,165481,51,1,1,4,-79.6000,-101.7000,-98.9000" //parse ligne string Schema case class val schema = parseString(ligne) //get RDD[Schema] val rdd = sc.parallelize(Seq(schema)) //now you can save this RDD to cassandra rdd.saveToCassandra("db", nameTable) } //function to parse string to Schema case class def parseString(s: String): Schema = { //get each field from string array val Array(collecttime, sbnid, enodebid, rackid, shelfid, slotid, channelid, c373910000, c373910001, c373910002, _*) = s.split(",").map(_.toDouble) //map those fields to Schema class Schema(collecttime, sbnid, enodebid, rackid, shelfid, slotid, channelid, c373910000, c373910001, c373910002) } }。比任何按钮单击Inside changeImageSource函数：this.state = {red_btn : null}。使用该逻辑设置，您可以使用：this.setState({red_btn : index})

呈现图像src属性

所有人都说，即使你当前的代码也很少需要修正。这只是为了让您更好地理解：如果您在图片src属性中传递src={this.state.red_btn == index ? "./red_logo.png" : "./black_logo.png"}而不是按钮点击处理程序，则必须this.state.src。

你的事件处理程序在按钮点击时调用，所以在事件处理程序（即changeImageSource函数）event.target不是你的图像而是按钮，你在那个按钮上设置src。

Answer 2

您的代码目前无法正常工作，因为您不会跟踪哪个索引应为黑色，哪个索引应为红色。这可以通过跟踪状态中的索引而不是源来解决。这是一种方法：

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

changeImageSource(event) {
  this.setState({selectedIndex: event.target.name})
}

render() {
  let tracks = ["button 1", "button 2", "button 3", "button 4", "button 5", "button 6 ", "button 7", "button 8", "button 9",];

return( 
    <div className="scrollmenu" id="scrolldiv"  >
      { console.log(tracks)}
      {tracks.map((item,index)=>
              <button id={index} key={index} name={index} onClick={this.changeImageSource} > 
                <figure>
                  <img  className='img' src={index === this.state.selectedIndex ? redlogo : blacklogo} />
                  <figcaption>{item}</figcaption>
                </figure>
              </button>   
          )}
   </div>
   )
  }

}

现在，我们如何在渲染.map中对每张图片应显示的徽标进行比较：src={index === this.state.selectedIndex ? redlogo : blacklogo}。由于只能选择一个索引，因此该条件将确保redlogo仅出现一次，其余为黑色。

此外，changeImgSource函数现在更新selectedIndex而不是图像源，它与索引无关，因此您会看到多个红色徽标。

ReactJs - 尝试设置单击按钮的状态，但先前单击的按钮的状态保持不变

2 个答案: