主页 / user-239802

vvitto's questions

Martin Hope
vvitto
Asked: 2020-03-10 03:25:20 +0000 UTC
  • 11

我最近开始通过视频教程学习 React。我试图在上面写下各种各样的“东西”，并以某种方式偶然发现了用这个例子翻译成俄语的官方文档：

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit(event) {
        alert('Text field value is: ' + this.state.value);
    }

    render() {
        return (
                <div>
                    <input type="text"
                     placeholder="Hello!"
                     value={this.state.value}
                     onChange={this.handleChange} />
                    <button onClick={this.handleSubmit}>
                        Submit
                    </button>
                 </div>
             );
    }
}

 ReactDOM.render(
     <Form />,
     document.getElementById('root')
 );

在我学习的视频课程中，它有点不同，即：

  1. 从通常的 React.createClass() 继承 class Form extends React.Component 创建组件有什么区别？
  2. 为什么 this 在没有它的情况下工作时使用 bind 绑定在类构造函数中？
  3. 一般来说，文档中的代码比我的代码有什么优势？（以下）
var Form = React.createClass({
    getInitialState: function(){
        return {
            value: ""
        }
    },
    handleChange(e){
        this.setState({value: e.target.value});
    },
    handleSubmit(e){
        alert("Text field value is: " + this.state.value);
    },
    render: function(){
            return (
                <div>
                    <input type="text"
                     placeholder="Hello!"
                     value={this.state.value}
                     onChange={this.handleChange} />
                    <button onClick={this.handleSubmit}>
                        Submit
                    </button>
                 </div>
             );
    }
});

ReactDOM.render(
        <Form />,
        document.getElementById('root')
);

提前致谢：3

javascript