Question

刚开始使用React编程，我想要一个按钮，在单击时转换为表单，然后返回到提交时的按钮。该表单不会再回到按钮状态，否则它在本地工作正常，但我无法在jsfiddle上工作。

这是我的小提琴：

var nameList = [];

var ClickMe = React.createClass({

    getInitialState: function() {
        return {
            text: "Add name"
        };
    },

    handleClick: function() {
        if (this.state.text == "Add Name") {
            this.setState({
                text: "Save"
            });
        } else {
            this.setState({
                text: "Add Name"
            });
        }
    },

    handleChange: function(event) {
        this.setState({
            value: event.target.value
        });
    },

    handleSubmit(event) {
        nameList.push(this.state.value);
        console.log(nameList);
        this.setState({
            text: "Add Name"
        });
        event.preventDefault();
    },

    render: function() {
        if (this.state.text == "Add Name") {
            return ( <
                form onSubmit = {
                    this.handleSubmit
                } >
                <
                label >
                Name:
                <
                input type = "text"
                value = {
                    this.state.value
                }
                onChange = {
                    this.handleChange
                }
                /> <
                /label> <
                input type = "submit"
                value = "Submit" / >
                <
                /form>
            )
        } else {
            return ( <
                button onClick = {
                    this.handleClick
                }
                type = "button" > {
                    this.state.text
                } <
                /button>
            )
        }
    }
});

ReactDOM.render( <
    ClickMe / > ,
    document.getElementById("root")
);

https://jsfiddle.net/petterwr/11vwamuz/1/

Answer 1

你的逻辑有一些问题。最初将文本设置为“添加名称”，因此按钮将被渲染（因为它不等于“添加名称”）。然后在提交表单后将文本设置为“添加名称”，这样它将重新呈现表单而不是恢复为按钮。我举了你的例子并改变了处理状态的方式：

var nameList = [];
var ClickMe = React.createClass({

    getInitialState: function() {
        return { 
            enterName: false
        };
    },

    handleClick: function() {
        this.setState({
            enterName: true
        });
    },

    handleChange: function(event){
        this.setState({value: event.target.value});
    },

    handleSubmit(event) {
        nameList.push(this.state.value);
        console.log(nameList);
        this.setState({
            enterName: false
        });
        event.preventDefault();
    },

    render: function() {
        if(this.state.enterName){
            return (
                <form onSubmit={this.handleSubmit}>
                    <label>
                      Name:
                      <input type="text" value={this.state.value} onChange={this.handleChange} />
                    </label>
                    <input type="submit" value="Submit" />
                  </form>
            )
        } else {
            return (
                <button onClick={this.handleClick} type="button">
                    Add Name
                </button>
            )
        }           
    }
});

ReactDOM.render(
    <ClickMe />,
    document.getElementById("root")
);

如果您的组件需要，您可以随时使用文字而不是true或false。

Answer 2

好像你试图通过安全的jsfiddle url（https）导入一个不安全的脚本（http）。无论如何，我将您的代码转移到另一个与React更好集成的jsfiddle：jsfiddle

我改变了一些东西，因为小提琴需要，我使用了一个类而不是createClass，这意味着我必须使用构造函数。此外，我将事件处理程序更改为箭头符号，因此当您尝试访问this.state时，this将指向类实例本身。

希望这有帮助。

成为表单的按钮，然后在提交

2 个答案: