[英]How can I make a fluid text input using react, which resizes based on the content?
我正在尝试实现此功能: https : //paper.fiftythree.com/search
输入框应根据内部内容扩展到最大宽度。 我正在使用React by Facebook通过状态执行此操作,因此渲染会自动调用。
我用跨度拼凑了一个小小提琴 - 但无法通过: http : //jsfiddle.net/abhinavsingi/3az621c2/
var Hello = React.createClass({
getInitialState: function(){
return {
name: 'hello'
};
},
render: function() {
return (
<div className="cont">
<span className="spacer-wrap">
<span className="spacer">{this.state.name}</span>
</span>
<input ref='name' id="nm-inp" className="input-wrap" value={this.state.name} onChange={this.onInputChange}/>
</div>
);
},
onInputChange: function(e){
console.log(e);
this.setState({name: e.currentTarget.value})
}
}); React.render(<Hello name="World" />, document.body);
尝试使用风格;
render: function() {
var nameWidth = this.state.name.length + 'em';
var spacerSty = {width: nameWidth};
return (
<div className="cont">
<span className="spacer-wrap">
<span className="spacer" style={spacerSty}>{this.state.name}</span>
</span>
<input ref='name' id="nm-inp" className="input-wrap" value={this.state.name} onChange={this.onInputChange}/>
</div>
);
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.