Question

我是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>
  );   
};

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

Answer 1

尚不清楚您到底想做什么，但是在我阅读本文时，您想在状态内向数组添加新项？

让我们使用您的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)

Answer 2

如果有帮助，我会为您创建一个工作代码段。

想法是在输入字段中输入名字和姓氏，并使用新数据获取更新状态。

您可以从此处展开它，以包括用于名字，姓氏和其他数据的单独文本输入。

重要的部分是处理在addXParty函数中使用该数据，形成需要使用适当ID进行广告的新对象，并使用setState添加的新数据来复制当前状态。

在official react documentation中详细了解其工作原理。很好。

const Inputs = props => {
	return (
		<React.Fragment>
			<div>
				{props.xParty} {props.zParty}
			</div>
			<span>{props.yAction}</span>
			<hr />
		</React.Fragment>
	);
};

const ManualInputs = props => {
	return (
		<div>
			<input
				value={props.inputValue}
				onChange={e => props.handleChange(e.target.value)}
				className='InputBox'
				placeholder='Enter Name'
				type='text'
			/>
			<button onClick={props.addX}>Submit</button>
		</div>
	);
};

class App extends React.Component {
	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 }
		],
		inputValue: ''
	};

	handleChange = value => {
		console.log(value);
		this.setState({ ...this.state, inputValue: value });
	};

	addXParty = () => {
		const newName = this.state.inputValue.split(' ');
		const newTransactionInput = {
			id: this.state.transactionInputs.length + 1,
			xParty: newName[0],
			yAction: 'Some action',
			zParty: newName[1],
			amount: 99
		};
		this.setState({
			...this.state,
			transactionInputs: [...this.state.transactionInputs, newTransactionInput],
			inputValue: ''
		});
	};
	render() {
		return (
			<div>
				{this.state.transactionInputs.map(data => {
					return (
						<Inputs
							key={data.id}
							xParty={data.xParty}
							zParty={data.zParty}
							yAction={data.yAction}
						/>
					);
				})}

				<ManualInputs
					addX={this.addXParty}
					inputValue={this.state.inputValue}
					handleChange={this.handleChange}
				/>
			</div>
		);
	}
}

    ReactDOM.render( < App / > , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

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

2 个答案: