Javascript 影响另一个元素但反应组件相同的onClick

如果标题不能解释太多，我很抱歉。我有一个react组件，它有一个按钮和一些文本，我用了3次。我希望每个按钮在单击时显示其文本，但隐藏其他文本

我编写的代码使我能够在单击每个按钮时显示文本，但它不会隐藏其他按钮的文本。我可以制作3个组件，每个按钮一个，但我想尝试这种方法，我不确定我是否可以让另一个也工作

反应组分：

import React from 'react'
export default class Button extends React.Component {
    state={
        display: 'none'
    }
    render() {
        return (<div>
            <button
                onClick={()=>this.setState({display:'block'})}
                style={{ width: "50px", height: "50px", display:"inline-block" }}>
                {this.props.children}
            </button>
            <h1 style={{display: this.state.display}}>
                {this.props.title}
            </h1>
            <img style={{display: this.state.display}} src={this.props.src} alt=""></img>
            <p style={{display: this.state.display}}>
                {this.props.descri}
            </p>
        </div>)
    }
}

App.js：

import React from 'react';
import './App.css';
import Button from './sarra.js';
import Aa from './Aa.jpg';
import kacem from './b1.jpg';
import harold from './kacem.JPG';
/*
const person = [
  {name:"sarah",
    imgsrc:"" ,
  description: "ipsum lorem " 
  },
  {name:"sarah",
    imgsrc:"" ,
  description: "ipsum lorem " 
  },
  {name:"sarah",
    imgsrc:"" ,
  description: "ipsum lorem " 
  }

]
*/
const isShown =() =>{
 Button.style="backgroundColor: red"
}
function App() {
  return (<div>
<Button title="Aa" descri="this is ali's profile" src={Aa} >ali</Button>

<Button title="harold" descri="this is harold's profile" src={harold} onClick={isShown()}>harold</Button>

<Button title="kacem" descri="this is kacem's profile" src={kacem} >kacem</Button>



  </div>
  );
}

export default App;

我还想做一个函数来隐藏其他按钮，所以我做了一个简单的函数来简单地启动，这就是使按钮变红的iShown，但它不起作用。我不知道出了什么问题，所以如果我知道故障在哪里，我可以更改它，以便使用其他按钮的id将其显示更改为隐藏。 也许我也可以利用国家？在定义了onclick道具的组件中，是否可以编写另一行，使其他按钮的显示隐藏在另一行中 this.setState{display:'block'} 还在吗？是否有与此相反的东西影响其他元素

---

如果可能的话，你也可以告诉我如何使三个按钮在同一行。谢谢大家!

App.js必须有一个保持活动按钮的状态，然后它可以决定要显示的文本，并且您必须给每个人一个唯一的id才能指定所选的id

App.js

...
state = {
  selected: null;
}
...
render() {
  const persons = [
    {
      id: '001',
      name: 'sarah',
      discr: 'some description...'
    },
    {
      ...
    },
    ...
  ]

  return(
    persons.map((p, index) => (<Button {...p} active={this.state.selected === p.id} onClick={() => this.setState({selected: p.id})} />

Button.js

<button onClick={this.props.onClick}>
  {this.props.name}
</button>
{ this.props.selected && <h1>
  {this.props.discr}
</h1>}

---

App.js必须有一个保持活动按钮的状态，然后它可以决定要显示的文本，并且您必须给每个人一个唯一的id以指定所选的id

App.js

...
state = {
  selected: null;
}
...
render() {
  const persons = [
    {
      id: '001',
      name: 'sarah',
      discr: 'some description...'
    },
    {
      ...
    },
    ...
  ]

  return(
    persons.map((p, index) => (<Button {...p} active={this.state.selected === p.id} onClick={() => this.setState({selected: p.id})} />

Button.js

<button onClick={this.props.onClick}>
  {this.props.name}
</button>
{ this.props.selected && <h1>
  {this.props.discr}
</h1>}

工作

Button.js

<button onClick={this.props.onClick}>
  {this.props.name}
</button>
{ this.props.selected && <h1>
  {this.props.discr}
</h1>}

App.js

...
state = {
  selected: null;
}
...
render() {
  const persons = [
    {
      id: '001',
      name: 'sarah',
      discr: 'some description...'
    },
    {
      ...
    },
    ...
  ]

  return(
    persons.map((p, index) => (<Button {...p} active={this.state.selected === p.id} onClick={() => this.setState({selected: p.id})} />

为了运行你的代码，我不得不删除一些图像和js文件。 要将它们对齐在一行中有几种方法，我使用的方法是将float:left应用于每个按钮组件。 让我知道它是否有用。

正在工作

Button.js

<button onClick={this.props.onClick}>
  {this.props.name}
</button>
{ this.props.selected && <h1>
  {this.props.discr}
</h1>}

App.js

...
state = {
  selected: null;
}
...
render() {
  const persons = [
    {
      id: '001',
      name: 'sarah',
      discr: 'some description...'
    },
    {
      ...
    },
    ...
  ]

  return(
    persons.map((p, index) => (<Button {...p} active={this.state.selected === p.id} onClick={() => this.setState({selected: p.id})} />

为了运行你的代码，我不得不删除一些图像和js文件。 要将它们对齐在一行中有几种方法，我使用的方法是将float:left应用于每个按钮组件。

---

如果有帮助，请告诉我。

谢谢您的努力！然而，一个小细节是，例如，当我点击哈罗德时，我只希望哈罗德在那里，其他人被隐藏。你的代码，正如我在阅读后测试的那样，使我能够点击一个按钮来显示和隐藏它的内容，但这并不影响我的问题的全部内容@阿利什比诺对不起！我更新了答案中的代码和代码块。感谢您的努力！然而，一个小细节是，例如，当我点击哈罗德时，我只希望哈罗德在那里，其他人被隐藏。你的代码，正如我在阅读后测试的那样，使我能够点击一个按钮来显示和隐藏它的内容，但这并不影响我的问题的全部内容@阿利什比诺对不起！我更新了答案中的代码和代码块。你能给我解释一下地图部分吗？我确实知道函数和所有内容，但我无法理解{…p}和活动部分：相反，我编写了3个具有不同标题和描述的按钮，我只编写了一个对象数组，每个对象保存一个按钮的值，然后将其映射到按钮组件，这样你的代码就变得更加干净和可复制了。其中p是这样一个对象{name:'ali'，discr:'Chbinou'}，与。这个按钮的激活状态与其他按钮的激活状态相同，但我们可以通过另一个按钮的激活状态来查看该按钮的激活状态，如果它们相等，则active为真，否则为假。然后在按钮组件中，我使用传递的prop active来确定我是否显示h1标记{this.props.active&&{this.props.discript}你能给我解释一下映射部分吗？我确实知道函数和所有内容，但我不理解{…p}活动部分：我写了3个不同标题和描述的按钮，我只是写了一个对象数组，每个对象都保存一个按钮的值，然后将它映射到按钮组件，这样你的代码就变得更干净，更容易复制。其中p是这样的对象{name:'ali'，discr:'Chbinou'}，与完全相同。这只是另一种语法，但要短得多。而活动部分，正如您每次单击按钮时可以看到的，该按钮的id存储在活动状态，这样我们可以通过检查哪个按钮的id与保存活动按钮id的活动状态相等来将活动按钮与其他按钮分开。我们可以这样做，如果他们相等， active是真的，否则是假的。然后在Button组件中，我使用传递的prop active来确定是否显示h1标记{this.props.active&{this.props.discript}