Question

我试图实现此功能： https://paper.fiftythree.com/search

输入框应根据内部内容扩展到最大宽度。我通过Facebook使用React通过状态执行此操作，因此渲染会自动调用。

我使用跨度整理了一个小小提琴 - 但无法通过： 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>
            );
    },

如何使用react进行流畅的文本输入，并根据内容调整大小？

1 个答案: