javascript - Adding Disabled Attribute to dynamically created Button In React - Stack Overflow

admin管理员组

文章数量:1352158

I have a QWERTY keyboard rendered dynamically through a ponent as Bootstrap buttons through bootstrap-react. They do not have IDs I'm trying to NOT use IDs as a crutch in React.

When one of the letters is clicked it fires off an onClick event through props, back to my App.js. This works fine. I want that button to then be disabled. Since it doesn't have an ID and I can't do a jQuery class& data- value selector because: React.

How can I change that buttons property to Disabled (Disabled is an allowable HTML property in react).

import React from "react";
import {Button} from 'react-bootstrap';


const keyboard = props => {
return (
    <div>
        {props.keyboard.keys.map((item,index) => (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()}> {item.toUpperCase()}
            </Button>
        ))}
    </div>
)
}

export default keyboard;

My click event is so far working as intended. Ideally I'd like the Button to change to:

<Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()} disabled> {item.toUpperCase()}</Button>

after the click event.

The keyboard is referenced from my App.js as follows:

            <Panel header="Keyboard:">
                <Keyboard keyboard={this.keyboard.row1} click={(event) => this.keyboardClickHandler(event)}
                />
                <Keyboard keyboard={this.keyboard.row2} click={(event) => this.keyboardClickHandler(event)}/>
                <Keyboard keyboard={this.keyboard.row3} click={(event) => this.keyboardClickHandler(event)}/>
                <div id="messages">{this.messages}</div>
            </Panel>

and the click handler console.logs the values as expected:

keyboardClickHandler = (event) => {
console.log(event.target.value)
}

*** Edit:

I kinda hacked it in there, because I was having trouble passing event data back through the super ponent. I reverted back to a simple ponent, and added an array of the keys in state holding boolean values, and a check inside the ponent to see if it should be disabled.

        status: {
            q: false,
            w: false,
            e: false,
            r: false,
            t: false,
            y: false,
            u: false,
            i: false,
            o: false,
            p: false

And the ponent:

import React from "react";
import {Button} from 'react-bootstrap';


const keyboard = props => {

return (
    <div>
        {props.keyboard.keys.map((item,index) => {
            let status = props.keyboard.status[item]
            return (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} disabled={status} value={item}> {item.toUpperCase()}
            </Button>
        )
    }
    )
}
    </div>
)
}

export default keyboard;

I have a QWERTY keyboard rendered dynamically through a ponent as Bootstrap buttons through bootstrap-react. They do not have IDs I'm trying to NOT use IDs as a crutch in React.

When one of the letters is clicked it fires off an onClick event through props, back to my App.js. This works fine. I want that button to then be disabled. Since it doesn't have an ID and I can't do a jQuery class& data- value selector because: React.

How can I change that buttons property to Disabled (Disabled is an allowable HTML property in react).

import React from "react";
import {Button} from 'react-bootstrap';


const keyboard = props => {
return (
    <div>
        {props.keyboard.keys.map((item,index) => (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()}> {item.toUpperCase()}
            </Button>
        ))}
    </div>
)
}

export default keyboard;

My click event is so far working as intended. Ideally I'd like the Button to change to:

<Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()} disabled> {item.toUpperCase()}</Button>

after the click event.

The keyboard is referenced from my App.js as follows:

            <Panel header="Keyboard:">
                <Keyboard keyboard={this.keyboard.row1} click={(event) => this.keyboardClickHandler(event)}
                />
                <Keyboard keyboard={this.keyboard.row2} click={(event) => this.keyboardClickHandler(event)}/>
                <Keyboard keyboard={this.keyboard.row3} click={(event) => this.keyboardClickHandler(event)}/>
                <div id="messages">{this.messages}</div>
            </Panel>

and the click handler console.logs the values as expected:

keyboardClickHandler = (event) => {
console.log(event.target.value)
}

*** Edit:

I kinda hacked it in there, because I was having trouble passing event data back through the super ponent. I reverted back to a simple ponent, and added an array of the keys in state holding boolean values, and a check inside the ponent to see if it should be disabled.

        status: {
            q: false,
            w: false,
            e: false,
            r: false,
            t: false,
            y: false,
            u: false,
            i: false,
            o: false,
            p: false

And the ponent:

import React from "react";
import {Button} from 'react-bootstrap';


const keyboard = props => {

return (
    <div>
        {props.keyboard.keys.map((item,index) => {
            let status = props.keyboard.status[item]
            return (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} disabled={status} value={item}> {item.toUpperCase()}
            </Button>
        )
    }
    )
}
    </div>
)
}

export default keyboard;

• javascript
• html
• reactjs
• jsx
• react-bootstrap

Share Improve this question Follow edited Dec 15, 2017 at 22:56 Jim Reinknecht asked Dec 15, 2017 at 1:52 Jim ReinknechtJim Reinknecht 8311 gold badge11 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

React works differently than jQuery for sure. Here are the steps you need to undertake in order to achieve what you want:

• Convert your ponent to a class ponent to have access to it's state.
• In your click event, set a disabled state variable to true
• in your render function, use that variable to disable your button

Here is some pseudo code

class keyboard extends React.Component {

  constructor(props) {
    super(props);
    // Set your initial disabled state here
    this.state = {
      buttonDisabled: false
    };

    // Bind your click handler
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  render() {
    return <Button onClick={this.onButtonClick} disabled={this.state.buttonDisabled} />;
  }

  onButtonClick(event) {
    // call your existing click event
    this.props.click(event);

    // Disable your button here
    this.setState({buttonDisabled: true});
  }

}

It requires some reworking of your ponent, but one straightforward method that es to mind would be to store a map of all of the key items in the state (could be in parent ponent or keyboard ponent) with the item as the key and a boolean as they value. Then, in your onClick handler, you can pass the item key and set the state to false for that given key.

So first, let's change your onClick handler to

onClick={item => props.onClick(item)}

Then in the parent ponent, or wherever you decide to define the state and onClick handler:

    // parent ponent
    constructor(props) {
        super(props);
        this.state = {
            a: false,
            b: false,
            ...
        }

    onClick(itemKey) {
        this.setState({ itemKey: false});
    }

You can then pass this state object to keyboard as a prop and, for each button in your map function, access the corresponding value for your item. Finally, you will need to add the disabled attribute to the button ponent in your map function. As you may know, in JSX you can execute javascript within brackets like so {'first' + 'last'}. Therefore, once you have passed down the map from the parent ponent state, just change add the following to your button:

disabled={{keyboard.props.[whateverYouNameThisStateProp][item]}}

Also, don't forget to set the key={} attribute to a unique value for the buttons you are iterating over.

Sorry if that's a little disorganized, let me know if I anything is unclear!

本文标签： javascriptAdding Disabled Attribute to dynamically created Button In ReactStack Overflow