Question

我很难改变状态。我想更改数组中的图像的状态，该图像对数组中的图像具有相应的描述。单击该章应显示图像和说明。你能告诉我我在做什么错吗？忽略第3-6章，因为我没有填充该代码。

import React from "react";
import {Component} from "react";
import Layout from "../components/layout";
import styles from "./book1.module.css";
import image1 from "../images/rainbow.jpg"
import image2 from "../images/rainbow2.jpg"


class book extends Component {

  constructor() {
    super();
      this.state= {

        index : 0,
        images : [image1, image2],
        ChapterDescriptions: ["chapter1","chapter2"]
      }

    }

    chapter1=()=>{
      this.setState({
        index: this.state.images.index[0]

      })

    }
    chapter2=()=>{
      this.setState({
        index: this.state.chapterImages[1]
      })
    }
    chapter3=()=>{
      this.setState({
        index: this.state.chapter3.image
      })
    }
    chapter4=()=>{
      this.setState({
        index: this.state.chapter4.image
      })
    }
    chapter5=()=>{
      this.setState({
        index: this.state.chapter5.image
      })
    }
    chapter6=()=>{
      this.setState({
        index: this.state.chapter6.image
      })
    }

  render(){
  return (
    <Layout>
      <div className={styles.container}>

      <div className={styles.chapters}>
          <h1>Anti-Children</h1>
          <p>
            Learn how our leaders subvert our children’s future and what you can
            do to brighten it
          </p>
            <ul>
              <br/>
              <br/>
                <li className={styles.description} onClick={this.chapter1} > aaaaaaa</li>
                <li className={styles.description} onClick={this.chapter2}> bbbbbbbbb</li>
                <li className={styles.description} onClick={this.chapter3}> ccccccccc</li>
                <li className={styles.description} onClick={this.chapter4}> ddddddddd</li>
                <li className={styles.description} onClick={this.chapter5}> eeeeeeeee</li>
                <li className={styles.description} onClick={this.chapter6}> fffffffff</li>
            </ul> 
        </div>
        <div className={styles.bookimage}>

            <img href="#" className={styles.chapterImage} src={this.state.images.index}/>
            <div className={styles.textArea} > {this.state.ChapterDescriptions.index}</div>
        </div>

      </div>
    </Layout>
  )

}
}

export default book

Answer 1

我已经编辑并添加了部分代码。

1。您可以使用map()

渲染一些循环标记

{this.state.ChapterDescriptions.map((item,index)=>{
  return <li className={style.description} onClick={()=>{handleIndex(index)}>{item}</li>
  })
}

2。您可以结合使用click event来更新状态

      handleIndex = (index) => {
        this.setState({ index: index });
      }

3。等等

<div className={styles.bookimage}>

            <img href="#" className={styles.chapterImage} src={this.state.images[this.state.index]}/>
            <div className={styles.textArea} > {this.state.ChapterDescriptions[this.state.index]}</div>
        </div>

完整代码

import React from "react";
import {Component} from "react";
import Layout from "../components/layout";
import styles from "./book1.module.css";
import image1 from "../images/rainbow.jpg"
import image2 from "../images/rainbow2.jpg"


class book extends Component {

  constructor() {
    super();
    this.state= {
      index : 0,
      images : [image1, image2],
      ChapterDescriptions: ["chapter1","chapter2"]
    }
  }
  handleIndex = (index) => {
    this.setState({ index: index });
  }
  render(){
  return (
    <Layout>
      <div className={styles.container}>

      <div className={styles.chapters}>
          <h1>Anti-Children</h1>
          <p>
            Learn how our leaders subvert our children’s future and what you can
            do to brighten it
          </p>
            <ul>
              <br/>
              <br/>
                {
                  this.state.ChapterDescriptions.map((item,index)=>{
                    return <li className={style.description} onClick={()=>{handleIndex(index)}>{item}</li>
                  })
                }
            </ul> 
        </div>
        <div className={styles.bookimage}>

            <img href="#" className={styles.chapterImage} src={this.state.images[this.state.index]}/>
            <div className={styles.textArea} > {this.state.ChapterDescriptions[this.state.index]}</div>
        </div>

      </div>
    </Layout>
  )

}
}

export default book

Answer 2

请通过实时示例演示检查此代码。如果您希望这样，可以遍历地图，而不必编写硬编码。

let data = [{id:1,chapter: "chapter 1", image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZlA55Pm9_SZbN90fmVOYgldndkgqSv6k88kQMzvDh36i_no7J&s'},
{id:2,chapter: "chapter 2", image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLZZPW62TuM_Qgtu8lMZJ1U9to8BM2A4dEmC27ZyDpzWq9ZAxe&s'},
{id:3,chapter: "chapter 3", image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFnKI9xni86qgmhlkHTN6utr__NX_vtgzpQSVBsnKM0Zzb92pG4g&s'},
{id:4,chapter: "chapter 4", image:'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png'},
{id:5,chapter: "chapter 5", image:'https://cdn2.iconfinder.com/data/icons/nodejs-1/512/nodejs-512.png'}]


 class Book  extends Component{ 
   state={selected:''}

   clickHandler=list=>{
    this.setState({selected:list})
   }
    render(){
      const {selected} =this.state;
      return (
           <div>
             {data.map((d)=>
             <p key={d.id}  onClick={()=>this.clickHandler(d)}>
               {d.chapter}
             </p>
             )}
             <hr />
             <h2>Please select an item from above list</h2>
             {selected!==''&&<div>
              <h3>{selected.chapter}</h3>
              <img src={selected.image} alt="chapterimg" 
              style={{height:100,width:150}}/>
             </div>}
           </div>
      )
 }
 }

选中此项以供参考Live demo

Answer 3

First, writing redundant <li> is not a good idea, you can change this by looping through a map function.

{
  this.state.ChapterDescriptions.map((item,index)=>(
    <li className={style.description} onClick={()=>this.setState({in
dex})}>
     {item}
    </li>)
}

and for showing the corresponding image

{
 <div className={styles.bookimage}>
        <img href="#" className={styles.chapterImage} src={this.state.images[this.state.index]}/>
        <div className={styles.textArea} > {this.state.ChapterDescriptions[this.state.index]}</div>
    </div>
}

反应状态变化

3 个答案: