输入第一个字符后输入失去焦点，即使指定了键

Question

我正在将一个字符串数组呈现为文本输入。渲染时，我渲染一个额外的输入，它更新数组末尾后的索引。问题是在输入第一个字符后，当新输入首次呈现时，当前输入失去焦点。 (Fiddle)

这些项目有一个关键道具，包括数组末尾后面的一个额外项目。我应该提交错误报告，还是我缺少有关表单输入如何工作的信息？

let MiniList = React.createClass({
    getInitialState() {
        return {
            items: []
        };
    },

    update( index, value ) {
        let items = this.state.items;
        items[ index ] = value;
        this.setState({ items: items });
    },

    renderItem( value, index ) {
        return (
            <div key={ index }>
                { index }
                <input type="text"
                    value={ value }
                    onChange={ event => this.update( index, event.target.value )}/>
            </div>
        );
    },

    render() {
        return (
            <div>
                { this.state.items.map( this.renderItem )}
                { this.renderItem( null, this.state.items.length )}
            </div>
        );
    }
});

React.render( <MiniList />, document.body );

Answer 1

<div>
    { this.state.items.map( this.renderItem )}
    { this.renderItem( null, this.state.items.length )}
</div>

编译为

React.createElement("div", null,
    this.state.items.map( this.renderItem ),
    this.renderItem( null, this.state.items.length )
)

其中 this.state.items.map( this.renderItem ) 中每个元素的键都将以子列表中数组的索引为前缀（在您的例子中，0）。这使得 this.state.items.map( this.renderItem ) 中的任何元素与 this.renderItem( null, this.state.items.length ) 返回的元素之间的协调变得不可能，因为它们不会共享相同的密钥。因此，当您将新项目添加到 this.state.items 时，最后一个输入将被卸载并在其位置安装一个新输入，这就解释了失去焦点的原因。

要解决此问题，请确保所有项目元素都在同一个数组中。

<div>
    {
        this.state.items
            .map( this.renderItem )
            .concat( [this.renderItem( null, this.state.items.length )] )
    }
</div>

或者干脆

<div>
    { this.state.items.concat([null]).map( this.renderItem ) }
</div>

输入第一个字符后输入失去焦点，即使指定了键

Input loses focus after the first character is entered, even with a key specified

reactjs