JSX的onClick属性反应元素无法按预期工作

Question

The onClick attribute for a button element created within a variable is not firing.

I tried directly defining the function in the onClick attribute, and simply out-putting to the console, but there is still nothing output to the console, and the button is not working as expected.

I also added a 'disabled={false}' attribute to the button to make sure that was not an issue, but the onClick attribute is still not working as expected.

let display = (<div className ='dtaskhome'>
    <h1>Tasks</h1>
    <button disabled={false} onClick={newTask} className='btask'>New Task +</button>
    <ul className ='ultasks'>{taskItems}</ul>
</div>);

function newTask() {
   console.log('point reached');
    Tasks.props.state.newTask = true;
}

No error messages related to the onClick attribute are being displayed, and the current code correctly renders the component.

Answer 1

I also added a 'disabled={false}' attribute to the button to make sure that was not an issue, but the onClick attribute is still not responsive.

Try implementing the function as a method.

newTaskHandler = (props) => {
   console.log('point reached');
   props.state.newTask = true;
}

Then try

onClick={this.newTask(this.props)}

Hope this helps you.

Answer 2

try to call the function:

onClick={newTask()}

And if not try to call it with this.

onClick={this.newTask()}