Arrays 使用reactjs为数组中的每个值生成文本框

嗨，我正在尝试我的reactjs，我有一个数组，我试图为每个元素生成文本框。这样，每个元素都将重命名并保存到新数组中，该数组用于其他目的。我在这里面临的问题是，我能够为每个元素生成文本框，但我无法编辑它。所以我在寻求帮助

class setNewname extends Component {

    constructor(props) {
        super(props);

        this.state = {
            oldArr: [apple,orange,grape],
            tabName: [],
        };
        this.onNameEdited = this.onNameEdited.bind(this);
    }

    onNameEdited(event) {
        this.state.tabVal = event.target.value;
        var tabName= this.state.tabName.concat(this.state.tabVal);
        debugger;
    };

    render() {
        return (
            <div>
                {this.state.tName.map(x =>
                   {x} 

                    <input type="text" label={x} key={x.toString()}
                        onChange={this.onNameEdited} />)}
            </div>

        );
    }
}

function bindAppStateToProps(applicationState) {
    debugger;
    return {
        tableName: applicationState.TableName.saveTable,
    };
}


export default connect(bindAppStateToProps)(setNewname);

class setNewname扩展组件{
建造师（道具）{
超级（道具）；
此.state={
奥尔达尔：[苹果、橘子、葡萄]，
选项卡名称：[]，
};
this.onnamedited=this.onnamedited.bind（this）；
}
onNameEdited（事件）{
this.state.tabVal=event.target.value；
var tabName=this.state.tabName.concat（this.state.tabVal）；
调试器；
};
render（）{
返回(
{this.state.tName.map（x=>
{x}
)}
);
}
}
函数bindAppStateTrops（应用程序状态）{
调试器；
返回{
tableName:applicationState.tableName.saveTable，
};
}
导出默认连接（BindAppStateTops）（setNewname）；

onChange函数应设置如下状态：

this.setState({tabVal: event.target.value})

然后您必须设置输入的值：

<input type="text" label={x} key={x.toString()} value={this.state.tabVal} onChange={this.onNameEdited} />)}

）}

我看到的一个问题是，您正在直接改变状态。应始终使用this.setState函数对状态进行变异。