Question

使用输入来插入数据

2017-01-30

2899

javascript reactjs input

我刚刚接触 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 之间的区别是什么吗？它们实际上是什么意思或指什么（例如：输入或其他东西）我不知道我是否应该跟上 react 或学习另一种语言，例如 angular

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