将插入数据与输入反应

Question

我刚接触 ReactJS。我在学习它时遇到了很多问题，每次我在使用它时失去动力。 我想通过输入将数据插入到 h1 中。我遵循了一些教程，搜索了一些代码，但我无法使其工作。

export default class Header extends React.Component{
    
    constructor(){
        super();
        this.state={title:''};
        this.handleChange = this.handleChange.bind(this);
        this.changeHtml = this.changeHtml.bind(this);
    }

    changeHtml(title){
        this.setState({title:title});
    }
      
    handleChange(event){
        const textInput = event.target.value;
        this.props.changeHtml(textInput);
    }
      
    render(){
            
        return (
            <div>
                <h1 title={this.props.title} changeHtml={this.changeHtml} > </h1>
                <label>
                    Name: <input type="text" name="name"   onChange={this.handleChange} />
                </label>
            </div>
        );
    }
}

你能告诉我 state 和 props 之间的区别是什么吗？它们实际上是什么意思或指的是什么（例如：输入或其他东西） 我不知道我是否应该跟上反应或学习另一种语言，例如角度

Answer 1

我从您的代码中删除了一些样板，我想它可以帮助您作为起点，但您需要了解“状态”和“道具”的真正含义。 https://jsfiddle.net/69z2wepo/68722/

class Header extends React.Component{

constructor(){
    super();
    this.state={title:''};
    this.handleChange = this.handleChange.bind(this);
}

handleChange(event){
    const textInput = event.target.value;
    this.setState({title:textInput});
}

render(){
        return (
            <div>
               <h1>{this.state.title}</h1>
                    <label>Name:
               <input type="text" onChange={this.handleChange} />
                    </label>
            </div>);
    }
}

ReactDOM.render(
  <Header />,
  document.getElementById('container')
);