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>
        );
    }
}

你能告诉我状态和道具之间的差异吗？它们实际意味着什么或指的是什么（例如：输入或其他东西）我不知道我是否应该跟上反应或学习另一种语言，如angular

Answer 1

我从你的代码中删除了一些样板文件，我想它可以帮助你作为起点，但你需要了解真正意义上的＆＃34;状态＆＃34;和＆＃34;道具＆＃34;。 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')
);

将插入数据与输入反应

1 个答案: