javascript - 如何使用根据内容调整大小的 React 进行流畅的文本输入？

Question

我正在尝试实现此功能: 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);

Answer 1

尝试使用样式；

    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>
            );
    },