ReactJS:子组件调用父组件时,"this.props" 不是函数
ReactJS: "this.props" is not a function when child component calls parent
我已经编写了这段代码,目前正在与 onClick 事件中的错误争论不休。我有两个事件,子元素上的 onClick 事件和顶级父元素上的 onChange 事件。
预期的行为应该是更改当前保存在 Container 组件中的 activeAccount 变量。为此,我在 AccountRow 组件上添加了一个 onClick 处理程序,该处理程序随后应调用顶级父级的 onChange 函数。
但是,行
'this.props.onChange(this.props.account)',
在
handleClick: function(e) {
this.props.onChange(this.props.account);
},
意思是调用参数为'this.props.account',
的父函数
给我这个错误:
Uncaught TypeError: this.props.onChange is not a function.
我最初认为这是一个范围问题,但我添加了
{...this.props}
在父 Container 中的每个子项和嵌套子项上
零件。因此,所有道具都应该向下传播到 AccountRow 组件。尽管如此,问题仍然存在。
var ACCOUNTS = [
{name: 'cash on hand'},
{name: 'savings account'},
{name: 'shared account'},
{name: 'my second wallet'}
];
var TRANSACTIONS = [
{date: '', name: 'Bananas', amount: 6, category: 'Groceries', account: 'cash on hand'},
{date: '', name: 'Apples', amount: 2.50, category: 'Groceries', account: 'cash on hand'},
{date: '', name: 'Cash withdrawal', amount: 250, account: 'savings account'}
];
var AccountRow = React.createClass({
handleClick: function(e) {
this.props.onChange(this.props.account);
},
render: function () {
return (
<li onClick = {this.handleClick}> {this.props.account}</li>
)}
});
var AccountList = React.createClass({
render: function () {
var rows = [];
this.props.accounts.map(function(each_account) {
rows.push(
<AccountRow
account = {each_account.name}
key = {each_account.name}
{...this.props}
/>);
})
return (
<ul>
{rows}
</ul>
)
}
});
var NavBar = React.createClass({
render: function () {
return (
<div id = 'account-tabs'>
<h2> Accounts </h2>
<AccountList
accounts = {this.props.accounts}
{...this.props}
/>
</div>
)
}
});
var TransactionRow = React.createClass({
render: function (){
var trans = this.props.transaction;
return (
<tr>
<td>{trans.date}</td>
<td>{trans.name}</td>
<td>{trans.amount}</td>
<td>{trans.account}</td>
<td><a href = ''>edit</a></td>
</tr>
)
}
});
var TransactionList = React.createClass ({
render: function () {
var activeaccount = this.props.activeAccount;
var rows = [];
this.props.transactions.map(function(each_transaction) {
if (each_transaction.account == activeaccount) {
/* Very strange behaviour
if (each_transaction account == this.props.activeAccount)
DOES NOT WORK, I do not know why this is the case
*/
rows.push(<TransactionRow transaction = {each_transaction} key = {each_transaction.name} />);
}
else {
/*console.log(each_transaction.account);*/
}
})
return (
<tbody>
{rows}
</tbody>
)
}
});
var TransactionsTable = React.createClass({
render: function() {
return (
<div id = 'recent-transactions'>
<h2>Recent Transactions for {this.props.activeAccount}</h2>
<table>
<tr>
<th>date</th>
<th>name</th>
<th>amount</th>
<th>account</th>
<th>edit </th>
</tr>
<TransactionList
transactions = {this.props.transactions}
activeAccount = {this.props.activeAccount}
/>
</table>
</div>
)
}
});
var TransactionForm = React.createClass({
render: function() {
return (
<div>
<h2>Add Transaction </h2>
<p>Transaction name</p>
<input type = 'text' />
<p>Price</p>
<input type = 'number'/>
<p>Category (optional) </p>
<input type = 'text' />
</div>
)
}
});
var ButtonMenu = React.createClass ({
render: function () {
return (
<div>
<button>Add Transaction</button>
</div>
)
}
});
var Container = React.createClass({
getInitialState: function (){
return {
activeAccount: ACCOUNTS[0].name
};
},
setActiveAccount: function(dat) {
this.setState({
activeAccount: dat
});
},
render: function () {
return (
<div id = 'wrapper'>
<NavBar
accounts = {ACCOUNTS}
activeAccount = {this.state.activeAccount}
onChange = {this.setActiveAccount}
{...this.props}
/>
<TransactionsTable
transactions = {TRANSACTIONS}
activeAccount = {this.state.activeAccount}
/>
<TransactionForm />
<ButtonMenu />
</div>
);
}
});
React.render(<Container />, document.body);
感谢您的宝贵时间。
问题是由map
函数引起的,调用map
时应该为thisArg
传入this
:
this.props.accounts.map(function(each_account) {
rows.push(
<AccountRow
account = {each_account.name}
key = {each_account.name}
{...this.props}
/>);
}, this);
然而,这将导致 AccountRow
具有像 accounts
和 activeAccount
这样的冗余变量。我认为您应该考虑仅传输 onChange
函数:
<AccountRow
account = {each_account.name}
key = {each_account.name}
onChange = {this.props.onChange}
/>
我已经编写了这段代码,目前正在与 onClick 事件中的错误争论不休。我有两个事件,子元素上的 onClick 事件和顶级父元素上的 onChange 事件。
预期的行为应该是更改当前保存在 Container 组件中的 activeAccount 变量。为此,我在 AccountRow 组件上添加了一个 onClick 处理程序,该处理程序随后应调用顶级父级的 onChange 函数。
但是,行
'this.props.onChange(this.props.account)',
在
handleClick: function(e) {
this.props.onChange(this.props.account);
},
意思是调用参数为'this.props.account',
的父函数给我这个错误:
Uncaught TypeError: this.props.onChange is not a function.
我最初认为这是一个范围问题,但我添加了
{...this.props}
在父 Container 中的每个子项和嵌套子项上 零件。因此,所有道具都应该向下传播到 AccountRow 组件。尽管如此,问题仍然存在。
var ACCOUNTS = [
{name: 'cash on hand'},
{name: 'savings account'},
{name: 'shared account'},
{name: 'my second wallet'}
];
var TRANSACTIONS = [
{date: '', name: 'Bananas', amount: 6, category: 'Groceries', account: 'cash on hand'},
{date: '', name: 'Apples', amount: 2.50, category: 'Groceries', account: 'cash on hand'},
{date: '', name: 'Cash withdrawal', amount: 250, account: 'savings account'}
];
var AccountRow = React.createClass({
handleClick: function(e) {
this.props.onChange(this.props.account);
},
render: function () {
return (
<li onClick = {this.handleClick}> {this.props.account}</li>
)}
});
var AccountList = React.createClass({
render: function () {
var rows = [];
this.props.accounts.map(function(each_account) {
rows.push(
<AccountRow
account = {each_account.name}
key = {each_account.name}
{...this.props}
/>);
})
return (
<ul>
{rows}
</ul>
)
}
});
var NavBar = React.createClass({
render: function () {
return (
<div id = 'account-tabs'>
<h2> Accounts </h2>
<AccountList
accounts = {this.props.accounts}
{...this.props}
/>
</div>
)
}
});
var TransactionRow = React.createClass({
render: function (){
var trans = this.props.transaction;
return (
<tr>
<td>{trans.date}</td>
<td>{trans.name}</td>
<td>{trans.amount}</td>
<td>{trans.account}</td>
<td><a href = ''>edit</a></td>
</tr>
)
}
});
var TransactionList = React.createClass ({
render: function () {
var activeaccount = this.props.activeAccount;
var rows = [];
this.props.transactions.map(function(each_transaction) {
if (each_transaction.account == activeaccount) {
/* Very strange behaviour
if (each_transaction account == this.props.activeAccount)
DOES NOT WORK, I do not know why this is the case
*/
rows.push(<TransactionRow transaction = {each_transaction} key = {each_transaction.name} />);
}
else {
/*console.log(each_transaction.account);*/
}
})
return (
<tbody>
{rows}
</tbody>
)
}
});
var TransactionsTable = React.createClass({
render: function() {
return (
<div id = 'recent-transactions'>
<h2>Recent Transactions for {this.props.activeAccount}</h2>
<table>
<tr>
<th>date</th>
<th>name</th>
<th>amount</th>
<th>account</th>
<th>edit </th>
</tr>
<TransactionList
transactions = {this.props.transactions}
activeAccount = {this.props.activeAccount}
/>
</table>
</div>
)
}
});
var TransactionForm = React.createClass({
render: function() {
return (
<div>
<h2>Add Transaction </h2>
<p>Transaction name</p>
<input type = 'text' />
<p>Price</p>
<input type = 'number'/>
<p>Category (optional) </p>
<input type = 'text' />
</div>
)
}
});
var ButtonMenu = React.createClass ({
render: function () {
return (
<div>
<button>Add Transaction</button>
</div>
)
}
});
var Container = React.createClass({
getInitialState: function (){
return {
activeAccount: ACCOUNTS[0].name
};
},
setActiveAccount: function(dat) {
this.setState({
activeAccount: dat
});
},
render: function () {
return (
<div id = 'wrapper'>
<NavBar
accounts = {ACCOUNTS}
activeAccount = {this.state.activeAccount}
onChange = {this.setActiveAccount}
{...this.props}
/>
<TransactionsTable
transactions = {TRANSACTIONS}
activeAccount = {this.state.activeAccount}
/>
<TransactionForm />
<ButtonMenu />
</div>
);
}
});
React.render(<Container />, document.body);
感谢您的宝贵时间。
问题是由map
函数引起的,调用map
时应该为thisArg
传入this
:
this.props.accounts.map(function(each_account) {
rows.push(
<AccountRow
account = {each_account.name}
key = {each_account.name}
{...this.props}
/>);
}, this);
然而,这将导致 AccountRow
具有像 accounts
和 activeAccount
这样的冗余变量。我认为您应该考虑仅传输 onChange
函数:
<AccountRow
account = {each_account.name}
key = {each_account.name}
onChange = {this.props.onChange}
/>