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

【问题标题】：Generating text box for each values in array using reactjs使用 reactjs 为数组中的每个值生成文本框
【发布时间】：2017-07-03 10:07:05
【问题描述】：

嗨，我正在尝试使用 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);

【问题讨论】：

我能看到的一个问题是你直接改变了状态。状态应始终使用 this.setState 函数进行变异。

标签： arrays reactjs react-redux

【解决方案1】：

你的 onChange 函数应该像这样设置状态：

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

然后你要设置输入的值：

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

【讨论】：