Я пытаюсь выяснить, как переключить активный класс onClick
изменить свойства CSS.
Я проявил много подходов и читал, многие ТАК отвечают. Используя jQuery это было бы относительно просто, однако, я не могу выяснить, чтобы сделать, это с реагирует. Мой код ниже. Кто-либо может советовать, как я должен сделать это?
Не создавая новый компонент для каждого объекта это возможный сделать это?
class Test extends Component(){
constructor(props) {
super(props);
this.addActiveClass= this.addActiveClass.bind(this);
}
addActiveClass() {
//not sure what to do here
}
render() {
<div>
<div onClick={this.addActiveClass}>
<p>1</p>
</div>
<div onClick={this.addActiveClass}>
<p>2</p>
</div>
<div onClick={this.addActiveClass}>
<p>3</p>
</div>
</div>
}
}
Я предпочел бы использовать "& &"; - оператор на встроенном операторе "if". По моему мнению это дает более чистой кодовой базе этот путь.
Обычно Вы могли делать, что-то вроде этого
render(){
return(
<div>
<button className={this.state.active && 'active'}
onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
</div>
)
}
Просто имеет в виду, что функция стрелки является функцией ES6, и не забудьте устанавливать значение 'this.state.active' в конструкторе класса () {}
this.state = { active: false }
или если Вы хотите ввести CSS в JSX, Вы можете сделать это этот путь
<button style={this.state.active && style.button} >button</button>
, и можно объявить, что стиль json переменная
const style = { button: { background:'red' } }
не забывает использовать Camel-регистр на таблицах стилей JSX.
использование Реагирует, можно добавить класс переключателя к любому идентификатору/элементу, попробовать
style.css
.hide-text{
display: none !important;
/* transition: 2s all ease-in 0.9s; */
}
.left-menu-main-link{
transition: all ease-in 0.4s;
}
.leftbar-open{
width: 240px;
min-width: 240px;
/* transition: all ease-in 0.4s; */
}
.leftbar-close{
width: 88px;
min-width:88px;
transition: all ease-in 0.4s;
}
fileName.js
......
ToggleMenu=()=>{
this.setState({
isActive: !this.state.isActive
})
console.log(this.state.isActive)
}
render() {
return (
<div className={this.state.isActive===true ? "left-panel leftbar-open" : "left-panel leftbar-close"} id="leftPanel">
<div className="top-logo-container" onClick={this.ToggleMenu}>
<span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome!</span>
</div>
<div className="welcome-member">
<span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome<br/>SDO Rizwan</span>
</div>
)
}
......
А хороший образец помог бы понять вещи лучше:
HTML
<div id="root">
</div>
, CSS
.box {
display: block;
width: 200px;
height: 200px;
background-color: gray;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.box.green {
background-color: green;
}
Реагирует, кодирует
class App extends React.Component {
constructor(props) {
super(props);
this.state = {addClass: false}
}
toggle() {
this.setState({addClass: !this.state.addClass});
}
render() {
let boxClass = ["box"];
if(this.state.addClass) {
boxClass.push('green');
}
return(
<div className={boxClass.join(' ')} onClick={this.toggle.bind(this)}>{this.state.addClass ? "Remove a class" : "Add a class (click the box)"}<br />Read the tutorial <a href="http://www.automationfuel.com" target="_blank">here</a>.</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
можно добавить класс переключателя или переключить состояние по щелчку
class Test extends Component(){
state={
active:false,
}
toggleClass() {
console.log(this.state.active)
this.setState=({
active:true,
})
}
render() {
<div>
<div onClick={this.toggleClass.bind(this)}>
<p>1</p>
</div>
</div>
}
}
Я начал учиться, недавно Реагируют и требуемый для создания вкладки только, чтобы видеть, как далеко мое знание пошло. Я столкнулся с этим и решил реализовать что-то без возвращения. Я вид чувства, ответы не отражают то, чего op хочет достигнуть. Он хочет только один активный компонент, но ответы здесь установят все активные компоненты. Я дал ему выстрел.
Ниже файл
import React, { Component } from 'react';
class Tab extends Component {
render(){
const tabClassName = "col-xs-3 tab-bar";
const activeTab = this.props.activeKey === this.props.keyNumber ? "active-tab" : null;
return (
<div
className = {`${tabClassName} ${activeTab}`}
onClick={()=>this.props.onClick(this.props.keyNumber)}
>
I am here
</div>
);
}
}
export default Tab;
вкладки файл вкладок...
import React, { Component } from 'react';
import Tab from './tab';
class Tabs extends Component {
constructor(props){
super(props);
this.state = {
currentActiveKey: 0,
tabNumber: 2
};
this.setActive = this.setActive.bind(this);
this.setTabNumber = this.setTabNumber.bind(this);
}
setTabNumber(number){
this.setState({
tabNumber: number
});
}
setActive (key){
this.setState({
currentActiveKey: key
});
}
render(){
let tabs = [];
for(let i = 0; i <= this.state.tabNumber; i++){
let tab = <Tab key={i} keyNumber={i} onClick={this.setActive} activeKey={this.state.currentActiveKey}/>;
tabs.push(tab);
}
return (
<div className="row">
{tabs}
</div>
);
}
}
export default Tabs;
Ваш индексный файл...
import React from 'react';
import ReactDOM from 'react-dom';
import Tabs from './components/tabs';
ReactDOM.render(
<Tabs />
, document.querySelector('.container'));
и css
.tab-bar {
margin: 10px 10px;
border: 1px solid grey;
}
.active-tab {
border-top: 1px solid red;
}
Это - скелет чего-то, что я хочу изменить к лучшему настолько увеличивающийся tabNumber вне 4, повредит CSS.
Используйте состояние. Реагирует документы здесь .
class MyComponent extends Component {
constructor(props) {
super(props);
this.addActiveClass= this.addActiveClass.bind(this);
this.state = {
active: false,
};
}
toggleClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
};
render() {
return (
<div
className={this.state.active ? 'your_className': null}
onClick={this.toggleClass}
>
<p>{this.props.text}</p>
</div>
)
}
}
class Test extends Component {
render() {
return (
<div>
<MyComponent text={'1'} />
<MyComponent text={'2'} />
</div>
);
}
}
Ну, Ваш addActiveClass должен знать то, что было нажато. Что-то вроде этого могло работать (заметьте, что я добавил информацию, какие отделения активны как массив состояния, и что onClick теперь передает информацию, что было нажато как парамать, после которой состояние соответственно upddated - существуют, конечно, более умные способы сделать это, но Вы получаете идею).
class Test extends Component(){
constructor(props) {
super(props);
this.state = {activeClasses: [false, false, false]};
this.addActiveClass= this.addActiveClass.bind(this);
}
addActiveClass(index) {
const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)];
this.setState({activeClasses});
}
render() {
const activeClasses = this.activeClasses.slice();
return (
<div>
<div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
<p>0</p>
</div>
<div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
<p>1</p>
</div>
<div onClick={() => this.addActiveClass(2)}>
<p>2</p>
</div>
</div>
);
}
}
Вышеупомянутые ответы будут работать, но на всякий случай Вы хотите другой подход, попробуйте имя класса: https://github.com/JedWatson/classnames
Реагируйте имеет понятие состояния компонентов, поэтому если Вы хотите переключить его, сделайте setState
:
constructor(props) {
super(props);
this.addActiveClass= this.addActiveClass.bind(this);
this.state = {
isActive: false
}
}
addActiveClass() {
this.setState({
isActive: true
})
}
В Вашем использовании компонента this.state.isActive
для рендеринга то, в чем Вы нуждаетесь.
Это становится более сложным, когда Вы хотите установить состояние в component#1 и использовать его в component#2. Просто выройте больше в, реагируют однонаправленный поток данных и возможно возвращение, которое поможет Вам обработать его.