Question

分配这两个功能时我在做什么错

function onAdd(e){
    console.log('+++++++++++++');
  }
function onRemove(e){
    console.log('-------------');
  }

到一个React Button组件（带有两个实例）

function onAdd(e){
    console.log('+++++++++++++');
  }
function onRemove(e){
    console.log('-------------');
  }
const Button = ({ text, styleClass, onAdd, onRemove }) => {
  return (
    <button
      type="button"
      onClick={e => onAdd(e)}
      onClick={e => onRemove(e)}
      className={'btn ${styleClass}'}
    >
      {text}
    </button>
  );
};
ReactDOM.render(
               <div>
                    <Button text="Add"  onClick = {(e) => this.props.onAdd(e)}/>
                    <Button text="Delete"  onClick = {(e) => this.props.onRemove(e)}/>
               </div>
, window.root);

现在点击每个按钮都会出现onRemove is not a function错误

Answer 1

尝试一下：

function onAdd(e){
    console.log('+++++++++++++');
  }
function onRemove(e){
    console.log('-------------');
  }
const Button = ({text, onClick }) => <button onClick={(e) => onClick(e)}>{text}</button>

ReactDOM.render(
   <div>
      <Button text='Add' onClick={onAdd}/>
      <Button text='Delete' onClick={onRemove}/>
   </div>,
   document.getElementById('root')
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>

Answer 2

有些事情可能对您来说还不太清楚，而这些基本上把所有事情搞砸了。

首先，Button组件有两个onClick事件处理程序，这是不可能的。您应该只有一个处理程序，像这样：

const Button = ({ text, styleClass, onClick }) => {
    return (
        <button
            type="button"
            onClick={ onClick }
            className={'btn ${styleClass}'}
        >
            { text }
        </button>
    );
};

然后，在渲染它时，不应使用this.props.onAdd或this.props.onRemove，因为this没有任何props属性}}或onAdd属性。

然后您应该将您的渲染转换为如下形式：

onRemove

假设ReactDOM.render( <div> <Button text="Add" onClick={ onAdd } /> <Button text="Delete" onClick={ onRemove } /> </div>, window.root )代表有效的文档元素。

无法将两个功能应用于React组件

2 个答案: