ReactJs即时打印值

我是新来reactjs并试图打印输入字段的更新值。我第一次尝试的是：ReactJs即时打印值

var App = React.createClass({ 
    render() { 
    return <div> 
     <h1>Hello, {this.props.name}</h1> 
     <input type="text" onKeyUp={this.handleChange} /> 
     <p>{this.handleChange}</p> 
    </div>; 
    }, 
    handleChange: function(event) { 
    return event.target.value; 
    } 
}); 
App = React.createFactory(App); 

React.render(
    <App name="World" />, 
    document.getElementById('mount-point'));

但我不明白为什么它不工作。比我试过这样：CodePen也许有人可以帮我即刻打印在<p>元素的输入字段的值

来源

2016-10-04 Sreinieren

您需要将更改的值存储到您的'handleChange'内的状态（例如'this.setState（{myInputValue：event.target.value}）;'）。然后你可以像这样“打印”你的'p'中的值：'

{this.state.myInputValue}

'。 – ctrlplusb

强烈建议您阅读文档和教程。 https://facebook.github.io/react/docs/thinking-in-react.html否则，你只是在猜测API。 – ctrlplusb

相关文档：https：//facebook.github.io/react/docs/forms.html – ctrlplusb

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      text: "", 
     }; 
    }, 
    handleChange: function(event) { 
     this.setState({ text: event.target.value }); 
    }, 
    render() { 
     return <div> 
      <h1>Hello, {this.props.name}</h1> 
      <input type="text" onChange={this.handleChange} /> 
      <p>{this.state.text}</p> 
     </div>; 
    }, 
});

必须存储在this.state组件的所有状态。使用this.setState来更新状态。更新状态时，组件会自动以新状态重新显示。

段落的内容是状态的当前值。 onChange通常用于代替onKeyUp来处理文本输入中状态的变化。当文本输入改变时，handleChange将更新状态。

来源

2016-10-04 09:57:38 afuous

ReactJs即时打印值

回答

相关问题