时间戳

首页 > 解决方案 > 反应，用户输入添加到状态并显示

reactjs - 反应，用户输入添加到状态并显示

问题描述

我是 React 的新手，正在尝试制作基本的东西。

到目前为止，我有一个状态的东西列表，我可以在屏幕上显示它，状态如下：

state = {
    transactionInputs: [
        {id: 1, xParty: "Pual", yAction: "Funds", zParty: "Leon", amount: 30},
        {id: 2, xParty: "Jerry", yAction: "Loans", zParty: "Tom", amount: 20},
        {id: 3, xParty: "Sarah", yAction: "Repays", zParty: "Alex", amount: 20},
    ] 
};

我用这个将它渲染到屏幕上：

       {this.state.transactionInputs.map(data => {
            return <Inputs key={data.id}
                xParty={data.xParty}
                zParty={data.zParty}
                yAction={data.yAction} />
        })}

这很好地出现在屏幕上。

现在我正在尝试向我的状态添加元素，我有一个方法，但我不确定如何完成它......我还不确定 React 是如何工作的

addXParty = () => {
    this.setState({});
};

然后我将此方法传递给组件...

 <ManualInputs addX={this.addXParty}/>

在我的手动组件文件中，我有...

const manualInputs = (props) => {

  return(
    <div>
        <input className={classes.InputBox} type="text" />
        <button onClick={props.addX}>Submit</button>
    </div>
  );   
};

我相信一切都很好并且连接正确，但我找不到创建方法并将其显示在屏幕上的好方法。

标签： reactjs

解决方案

有点不清楚你到底想做什么，但是当我读到它时，你想在你的州内向你的数组添加新项目？

让我们使用您的 addXParty 函数。

可以通过以下方式获取您的状态，例如，如果您想获取 transactionInputs 数组：

let { transactionInputs } = this.state

之后您可能想向状态添加一个新元素？

transactionInputs.push({id: 4, xParty: "XX", yAction: "YY", zParty: "ZZ", amount: 100})

最后用新数据更新状态：

this.setState({transactionInputs})

并且应该显示新数据。这就是您在 addXParty 函数中所要做的一切。

编辑：

顺便说一句，在您的构造函数中，您必须绑定您的 addXParty。因此，在您的构造函数中添加以下行：

this.addXParty = this.addXParty.bind(this)

编辑编辑：

最后一件事。您想从输入字段中获取值吗？在这里，状态的使用将是解决它的好方法。首先向状态添加一个新字段，如下所示：

state = {
    transactionInputs: [
        {id: 1, xParty: "Pual", yAction: "Funds", zParty: "Leon", amount: 30},
        {id: 2, xParty: "Jerry", yAction: "Loans", zParty: "Tom", amount: 20},
        {id: 3, xParty: "Sarah", yAction: "Repays", zParty: "Alex", amount: 20},
    ],
    userInput: ""
}

并添加一个函数来处理输入变化：

onChange(e) {
   let userInput = e.target.value
   this.setState({userInput})
}

现在将以下内容添加到您的输入字段中。

<input className={classes.InputBox} type="text" value={this.state.userInput} onChange={(e)=>this.onChange(e)} />

最后，在你的 addXParty 函数中，你可以获得新的 userInput，例如尝试 console.log 在那里。

console.log(this.state.userInput)

推荐阅读