我正在尝试实现此功能: https://paper.fiftythree.com/search
输入框应该根据里面的内容扩展到最大宽度。 我正在使用 Facebook 的 React 通过状态来执行此操作,因此会自动调用渲染。
我已经使用 span 组合了一个 fiddle - 但无法完成: 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>
);
},
关于javascript - 如何使用根据内容调整大小的 React 进行流畅的文本输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32602151/