Question

对不起，标题解释不多。我有一个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 Aloolooy from './Aloolooy.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="Aloolooy" descri="this is ali's profile" src={Aloolooy} >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;

我还考虑过要创建一个功能来隐藏其他按钮，所以我做了一个简单的函数来简单地启动，即isShown使按钮变成红色，但没有用。我不知道出了什么问题，所以如果我知道问题出在哪里，我可以对其进行更改，以便使用其ID将其他按钮的显示更改为隐藏。也许我也可以使用状态？在定义了onclick道具的组件中，是否可以编写另一行，从而隐藏其他按钮的显示，而另一 this.setState（{display：'block'} 还在那儿？是否有与this相反的东西影响其他元素？

如果可能，您还可以向我展示如何在同一行中制作三个按钮。谢谢！

Answer 1

App.js必须具有保持活动按钮的状态，然后它才能决定要显示的文本，并且必须为每个人提供唯一的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>}

Answer 2

工作codesandbox

Button.js

import React from "react";
const clicked = {
  width: "50px",
  height: "50px",
  display: "inline-block"
};

export default class Button extends React.Component {
  state = {
    status: false
  };

  clickButton = () => {
    const status = this.props.status;
    this.setState({ status: !status });
    this.props.onChange(this.props.user.id);
  };
  render() {
    return (
      <div style={{ float: "left" }}>
        <button
          onClick={this.clickButton}
          style={this.props.status ? clicked : null}
        >
          {this.props.children}
        </button>
        {this.props.status && (
          <div>
            <h1>{this.props.user.name}</h1>
            <img
              src={this.props.user.imgSrc}
              style={{ width: "30px" }}
              alt=""
            />
            <p>{this.props.user.description}</p>
          </div>
        )}
      </div>
    );
  }
}

App.js

import React from "react";
import Button from "./Button";

const userList = [
  {
    id: 1,
    name: "user1",
    description: "user1 profile",
    imgSrc:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Brad_Pitt_Fury_2014.jpg/330px-Brad_Pitt_Fury_2014.jpg"
  },
  {
    id: 2,
    name: "user2",
    description: "user2 profile",
    imgSrc:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Brad_Pitt_Fury_2014.jpg/330px-Brad_Pitt_Fury_2014.jpg"
  },
  {
    id: 3,
    name: "user3",
    description: "user3 profile",
    imgSrc:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Brad_Pitt_Fury_2014.jpg/330px-Brad_Pitt_Fury_2014.jpg"
  }
];
export default class App extends React.Component {
  state = {
    selectedUserId: null
  };
  handleClick = id => {
    this.setState({ selectedUserId: id });
  };
  render() {
    return userList.map(user => (
      <div key={user.id}>
        <Button
          status={user.id === this.state.selectedUserId ? true : false}
          user={user}
          onChange={this.handleClick}
        >
          {user.name}
        </Button>
      </div>
    ));
  }
}

我必须删除一些图像和js文件才能运行您的代码。为了使它们对齐一行，有几种方法，我使用的一种方法是将float:left应用于每个Button组件。让我知道是否有帮助。

onClick会影响其他元素但具有相同的反应成分

2 个答案: