Reactjs 尝试使用React构建冠军选择屏幕

我仍在学习React，我正在尝试构建一个Champion，在本例中是名称hashiras选择屏幕。我从react应用程序中的一个数组中获取数据，并尝试选择一个数组，然后显示一个切换，表明已选择此championhashira。然而，我对状态有点困惑，一直在努力显示我在数组中的4个hashira中所选hashira的名称。我的图像也没有出现

我试图获得的是，当我点击choose时，顶部文本将显示所选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')
)

再次感谢你的帮助

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

查看

---

你能为此创建一个沙盒吗。然后我可以在那里编辑代码？当然我已经编辑了一点代码。我试图实现的是在选择hashira时显示一个表单，在该表单中我将输入自己的用户名，但这是供以后使用的。在这里，我只想使用state和setState显示顶部选择的hashira的名称。我还评论了沙盒版本中的图像，因为它需要上传它。我只是想在我点击按钮时显示一个文本，文本输出应该是hashira的名称。谢谢你，这帮了大忙。我还得多了解一点。现在，我必须显示一个表单，供用户输入其详细信息：我需要一点帮助，我如何才能导出这个组件，因为这个组件包含一些道具，例如，如果没有道具，它会很容易像导出默认值，但我有这个问题。

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")
);