如何正确禁用ReactJS上的按钮？

Question

I am learning ReactJS. I wrote a web app that should show an input text and a button 'Confirm', and when pressed it shows a second input text with a button 'Go back' which removes the new input. When the second one is showed, the first input and the first button are disabled.

However, my current script is not accepted. I'm having problems with passing functions as prop to the function FormRender and with indicating in the FormRender object itself the property "disabled" (it claims to have found "unexpected token").

Are there any better approaches?

function FormRender (props) {
    return (
        <div>
            <input type = "text" placeholder = {this.props.holder} {this.props.disable} />
            <button onClick = {this.props.Click()} {this.props.disable} > {this.state.value} </button>
        </div>
    );
};

var R  = React.createClass ({
    getInitialState: function () {
        return { names: [], disable: false }
    },
    update: function () {
        return this.state.disable ? "disabled" : "";
    },
    componentDidMount: function () {
        var a = this.state.names;
        a.push ( <FormRender holder = 'Name' value = 'Confirm' Click = {this.In}, disable: {this.update} /> );
        this.setState ( { names: a } );
        this.forceUpdate();
    },  
    In: function () {
        var a = this.state.names;
        this.setState ( { disable: true } );
        a.push ( <FormRender holder = 'Surname ' value = 'Back' Click = {this.Out} disable: "" /> );
        this.setState ( { names: a } );
        this.forceUpdate();
    },
    Out: function () {
        var a = this.state.names;
        this.setState ( { disable: false } );
        a.splice(a.length-1,1);
        this.setState ( { names: a } );
        this.forceUpdate();
    },  
    render: function () {
        return (
            <div>
                {this.state.names}
            </div>
        );
    }
});

Answer 1

I am not sure if it is what you want my example

function FormRender (props) {
return (
    <div>
        <input
            type="text"
            placeholder={props.holder}
            disabled={props.disable()}
        />
        <button
            onClick={props.click}
            disabled={props.disable()}
        >
            {props.value}
        </button>
    </div>
);
};

var R  = React.createClass ({
getInitialState: function () {
    return {names: [], disable: false}
},

update: function () {
    return this.state.disable;
},

componentDidMount: function () {
    var a = this.state.names;
    var form = {
        holder: 'Name',
        value: 'Confirm',
        click: this.In,
        disable: this.update
    };

    a.push(form);
    this.setState({names: a});
},  
In: function () {
    if (this.state.names.length > 1) {
        return;
    }

    var a = this.state.names;
    var form = {
        holder: 'Surname',
        value: 'Back',
        click: this.Out,
        disable: function () {
            return false
        }
    }

    this.setState({disable: true});
    a.push(form);
    this.setState({names: a});
},
Out: function () {
    var a = this.state.names;
    this.setState({disable: false});
    a.splice(a.length-1,1);
    this.setState({names: a});
},  
render: function () {
    return (
        <div>
            {this.state.names.map(function (el) {
                return (<FormRender
                    holder={el.holder}
                    value={el.value}
                    click={el.click}
                    disable={el.disable}
                />);
            })}
        </div>
    );
}
});

https://jsfiddle.net/69z2wepo/72509/

You have got many syntax errors in you code. I recommend use linter :)