Question

我正在学习ReactJS。我写了一个应该显示输入文本和按钮“确认”的网络应用程序，按下它时会显示带有按钮的第二个输入文本＆＃39;返回＆＃39;删除新输入。当显示第二个输入时，第一个输入和第一个按钮被禁用。

但是，我的当前脚本不被接受。我将函数作为prop传递给函数FormRender并在FormRender对象本身中指示属性＆＃34;禁用＆＃34; （它声称已发现＆＃34;意外的令牌＆＃34;）。

有没有更好的方法？

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

我不确定这是否是你想要的例子

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/

您的代码中有很多语法错误。我建议使用linter：）

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

1 个答案: