尝试使用 React 构建冠军 Select 屏幕

Question

我仍在学习 React，我正在尝试打造冠军（在本例中为 name hashiras）selection screen。我正在从反应应用程序中的数组中获取数据，我正在尝试 select 一个并显示已选择此冠军（hashira）的切换。但是，我对状态有点困惑，并且一直在努力尝试在数组中的 4 个中显示所选 hashira 的名称。我的图片也没有出现。

我想要获得的是当我点击选择时，顶部文本将显示所选 hashira 的名称。

我的最终目标是在选择 hashira 后切换一个表单以输入自己的用户名，我将自己尝试。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import {rengokuimg} from './Images/rengokuIMG.png';
import {sanemiimg} from './Images/rengokuIMG.png';
import {shinobuimg} from './Images/rengokuIMG.png';
import {giyuuimg} from './Images/rengokuIMG.png';


let hashiraList=[
    {"name":"Rengoku Kyojiro", "description":"Flame Hashira", "age":20, "element":"Flame","imgsource":rengokuimg,"Choice":"Rengoku Chosen"},
    {"name":"Giyuu Tomioka", "description":"Water Hashira", "age":21, "element":"Water","imgsource":giyuuimg,"Choice":"Giyuu Chosen"},
    {"name":"Sanemi Shinazugawa", "description":"Wind Hashira", "age":22, "element":"Wind","imgsource":sanemiimg,"Choice":"Sanemi Chosen"},
    {"name":"Shinobu Kocho", "description":"Insect Hashira", "age":22, "element":"Poison","imgsource":shinobuimg,"Choice":"Shinobu Chosen"}
]

const Hashira =({name, description,element,age,imgsource,Choice}) => {
    return(
        <section>
            <h2>Name: {name}</h2>
            <p>Description: {description}</p>
            <div><img src={imgsource}/></div>
            <p>Element: {element}</p>

            {/* <button onClick={()=>console.log({name},console.log({age}))}>Choose </button> */}
            <button onClick={()=>console.log({Choice})}>Select the {element} hashira</button>
        </section>
    )
}
const NotSelected=()=>
    <div>
        <h1>No Hashira Selected.</h1>
    </div>


const Selected=()=>
    <div><h2>You have chosen hashira</h2></div>

class HashiraSelect extends React.Component{
    state = {
        Chosen : false,
        formdisplay :false,
        selected:false
    }
    toggleOpenClosed({name}){
        this.setState({
            Chosen: !this.state.Chosen,
            selected: {name}
        })
    }
    render(){
        console.log(this.state)
        const {hashiras} = this.props
        return(
            <div>
                {this.state.selected ? <Selected/> : <NotSelected/>}
                            {/* <h1> Have you chosen a Hashira : {this.state.Chosen ? 'Chosen' : 'Not yet'}</h1> */}

            {hashiras.map(
                (hashira, idx) =>
                 <Hashira 
                 key={idx} 
                 name={hashira.name} 
                 description={hashira.description} 
                 age={hashira.age} 
                 element={hashira.element}
                 Choice={hashira.Choice}
                 imgsource={hashira.imgsource}
                 Selected={this.state.Selected}
                 />
            )}
            {/* <button onClick ={this.toggleOpenClosed}>Choose</button> */}


        </div>
        )
    }
}

{/* <Hashira name="Sanemi" description="The wind Hashira." element="Wind"/> */}

render(

    <HashiraSelect hashiras={hashiraList}/>,


    document.getElementById('root')
)

再次感谢您的帮助。

Sandbox link

Answer 1

应在 HashiraSelect 中创建 onChange 处理程序。将此处理程序作为道具传递给 Hashira 组件。单击 button 时，将选定的 hashira 值传递给 onChange 处理程序并将其设置为状态。

查看 WORKING DEMO

const Hashira = ({
  name,
  description,
  element,
  age,
  imgsource,
  Choice,
  onChange
}) => {
  return (
    <div>
      <section>
        <h2>Name: {name}</h2>
        <p>Description: {description}</p>
        {/* <div><img src={rengokuimg}/></div> */}
        <p>Element: {element}</p>

        {/* <button onClick={()=>console.log({name},console.log({age}))}>Choose </button> */}
        <button onClick={() => onChange(Choice)}>
          Select the {element} hashira
        </button>
      </section>
    </div>
  );
};

class HashiraSelect extends React.Component {
  state = {
    Chosen: false,
    formdisplay: false,
    choice: null
  };
  toggleOpenClosed() {
    this.setState({
      Chosen: !this.state.Chosen
    });
  }

  onChange = choice => {
    this.setState({ choice, Chosen: true });
  };
  render() {
    console.log(this.state);
    const { hashiras } = this.props;
    const { choice } = this.state;
    return (
      <div>
        <h1>
          Have you chosen a Hashira : {this.state.Chosen ? "Chosen" : "Not yet"}
        </h1>
        {choice && <h2>{`Hashira Chosen:${choice}`}</h2>}
        {hashiras.map((hashira, idx) => (
          <Hashira
            key={idx}
            name={hashira.name}
            description={hashira.description}
            age={hashira.age}
            element={hashira.element}
            Choice={hashira.Choice}
            onChange={this.onChange}
            //  imgsource={hashira.imgsource}
            Selected={this.state.Selected}
            //  Choice={this.state.Chosen}
          />
        ))}
        {/* <button onClick ={this.toggleOpenClosed}>Choose</button> */}
      </div>
    );
  }
}

//  <Hashira name="Sanemi" description="The wind Hashira." element="Wind"/>

render(
  <HashiraSelect hashiras={hashiraList} />,

  document.getElementById("root")
);

尝试使用 React 构建冠军 Select 屏幕

Trying to build a champion Select Screen using React

reactjs

create-react-app

react-state