Javascript 反应，绑定输入值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34037777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React, Binding input values
提问by Gabriel Lopes
I'm having some problems with binding the value of an input, I have done it on another component of my app and it worked fine, but somehow I can't get it works on another component. I'm only getting the first letter and not the whole text
我在绑定输入值时遇到了一些问题，我已经在我的应用程序的另一个组件上完成了它并且运行良好，但不知何故我无法让它在另一个组件上工作。我只得到第一个字母而不是整个文本
This is my component
这是我的组件
class Post extends Component {
constructor(props) {
super(props);
this.state = {
post: this.props.data,
comment: ''
}
Post.context = this;
}
render() {
<input type="text" value={this.state.comment} onChange={this.handleChange} placeholder="Write a comment..." />
<button className="button comments" onClick={this.handleClick.bind(null,this.state.post.id)}></button>
}
handleChange(e) {
Post.context.setState({comment: e.target.value});
}
}
I also tried to use an example from React website but it got the same result:
我还尝试使用 React 网站上的示例，但得到了相同的结果：
render() {
var valueLink = {
value: this.state.comment,
requestChange: this.handleChange
};
render() {
<input type="text" valueLink={valueLink} placeholder="Write a comment..." />
<button className="button comments" onClick={this.handleClick.bind(null,this.state.post.id)}></button>
}
handleChange(newValue) {
Post.context.setState({comment: newValue});
}
}
Does someone have idea, why this is happening?
有人知道为什么会这样吗？
回答by Alexander T.
You must wrap inputand buttonin rootelement (for example div)., component can have only one root element.
您必须将input和包裹button在根元素（例如 div）中，组件只能有一个根元素。
You can use .bindlike in my example, and avoid using Post.context = this;
您可以.bind在我的示例中使用like，并避免使用Post.context = this;
class Post extends React.Component {
constructor(props) {
super(props);
this.state = {
post: this.props.data,
comment: ''
};
}
render() {
return <div>
<input
type="text"
value={this.state.comment}
onChange={ this.handleChange.bind(this) }
placeholder="Write a comment..." />
<button
className="button comments"
onClick={ this.handleClick.bind(this, this.state.post.id)}>Button</button>
</div>
}
handleClick(postId, e) {
console.log( postId );
console.log( this.state.comment );
}
handleChange(e) {
this.setState({ comment: e.target.value });
}
}
Note:React 16.* contains the new feature - Fragments, which allows skipping additional root element.
注意：React 16.* 包含新特性 - Fragments，它允许跳过额外的根元素。
render() {
return (
<>
<input
type="text"
value={this.state.comment}
onChange={ this.handleChange.bind(this) }
placeholder="Write a comment..."
/>
<button
className="button comments"
onClick={ this.handleClick.bind(this, this.state.post.id)}
>
Button<
/button>
</>
)
}
