jsp 中onclick不起作用

Posted 2023-03-25

我在th上加了一个onclick事件，可是th根本就是不可点击的
<th onclick="order('年龄','ord');">年龄</th>

function order(obj,action)
……

这是为什么

th可以加点击事件的，你试试onclick="alert('年龄')"，看看可不可以用。可以用，就说明你的js方法代码可能有问题，不可以用，那是个奇葩的问题了。

你也可以试试给年龄套个<a>标签，再用点击事件。 参考技术A jsp 中onclick不起作用原因如下：
举例说明：<input type="button" onClick="click()">button text</input>
换成：<input type="button" onClick="return click();">button text</input>
这里注意：return click强制带回参数，所以在这里起作用。 参考技术B 写一个form表单，提交到一个servlet或者action中，表单中添加几个
，再来一个提交按纽。
xxx就是商品名，单价等等的标记，而不是他们的值，值是你添在这个text中的内容
当点击提交的时候，就是向后台传值了
你用servlet的话，可以使用String yyy=request.getParameter("xxx");来获取前台传过来的值,这里的xxx就是前台JSP中name的xxx的值。这个值就是yyy
然后，写SQL语句吧
如果是struts，可以使用formBean，不需要用request获取，可以使用
类名 对象 =(类名)form;来或者这个对象，可以直接存这个对象。
或者和servlet一样，一个一个获取值
这个如果不懂，可以不管，总之我的方法能实现你的取值。
不懂的话，可以继续追问我！~
我了个去的，都不追问我
js中如果或者这个总数，那是不能够再传这个form表单的值过去的，因为js中你要定义你个URL
URL+求到的总数，用js打开这个页面，那这个就是get提交了，你就需要把所有的form里的值都一个一个加到url中,比如
你求得了total,并且取得了productName什么的
var url="地址?total="+total+"&productName="+productName+.......;
然后你需要open这个url
你可以在后台编写求得total这样就不用这么麻烦写JS了
哎，我给你写代码吧， 不能对不起我写的这么多字，稍等！~

React 父组件中的 onClick 事件不起作用

【中文标题】React 父组件中的 onClick 事件不起作用

【英文标题】：onClick event in React parent component is not working

【发布时间】：2018-05-31 03:53:56

【问题描述】：

我创建了一个 react 父组件，它将一些道具向下传递给它的子组件，并拥有一个 onClick 函数。当单击产品组件时，onClick 函数应该 console.log 'WORKED'，这不起作用并且控制台上没有出现任何内容。我不明白我哪里出错了，这应该很简单。我犯了一个我一直想念的愚蠢错误吗？

这是我的父组件代码：

import React from 'react';
import  connect  from 'react-redux';
import Product from '../components/product.js';
import  bindActionCreators  from 'redux';
import  changeTotal  from '../actions/index.js';
import  selectProduct  from '../actions/index.js';

class ProductList extends React.Component 
    constructor(props) 
        super(props);

        this.state=
            total: 0
        

        this.addFromTotal = this.addFromTotal.bind(this);
        this.subtractFromTotal = this.subtractFromTotal.bind(this);
        this.handleClick = this.handleClick.bind(this);
    

    handleClick() 
        console.log('done')
    

    addFromTotal(product) 
        var x = Number(product.price)
        this.setState(total: this.state.total + x, () => 
            console.log('total is ' + this.state.total);
            var total = this.state.total;
            this.props.changeTotal(total);
        );
    

    subtractFromTotal(product) 
        var x = Number(product.price)
        this.setState(total: this.state.total - x, () => 
            console.log('total is ' + this.state.total);
            var total = this.state.total;
            this.props.changeTotal(total);
        );
    

    render() 
        var createProductList = this.props.products.map((product, i) => 
            return <Product
                    key=i 
                    title=product.title 
                    price=product.price 
                    definition=product.definition
                    source=product.source
                    addFromTotal=() => this.addFromTotal(product)
                    subtractFromTotal=() => this.subtractFromTotal(product)
                    // onClick=() => this.props.selectProduct(product)
                    onClick=this.handleClick
                    />
        );
        return (
            <div>
                <div>Product List</div>
                <div style=display: 'flex', flexDirection: 'row'>createProductList</div>
            </div>
        );
    


function mapStateToProps(state) 
    return 
        products : state.products
    


function mapDispatchToProps(dispatch) 
    return bindActionCreators( changeTotal: changeTotal , dispatch);



export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

这是 Product（子）组件的代码：

import React from 'react';
import  connect  from 'react-redux';
import  bindActionCreators  from 'redux';
import  updateItemObject  from '../actions/index.js'

class Product extends React.Component 
    constructor(props) 
        super(props);

        this.state = 
            counter: 0,
            itemTotal: 0
        

        this.handleAdd = this.handleAdd.bind(this);
        this.handleSubtract = this.handleSubtract.bind(this);
    

    handleAdd(product) 
        var x = Number(this.props.price)
        this.setState(
            itemTotal: this.state.itemTotal + x,
            counter: this.state.counter + 1
        , () => 
            console.log('item total ' + this.state.itemTotal);
            console.log('item count ' + this.state.counter);
            this.props.addFromTotal(product);
        );
    

    handleSubtract(product) 
        if(this.state.counter === 0) 
            return;
        

        var x = Number(this.props.price)
        this.setState(
            itemTotal: this.state.itemTotal - x,
            counter: this.state.counter - 1
        , () => 
            console.log('item total ' + this.state.itemTotal);
            console.log('item count ' + this.state.counter);
            this.props.subtractFromTotal(product);
        );
    

    render() 
        return (
            <div style=margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'>
               <div>product name: this.props.title</div>
               <div>product price: this.props.price</div>
               <div>product definition: this.props.definition</div>
               <div style=
                   backgroundImage: this.props.source,
                   backgroundSize: 'cover',
                   padding: '15px',
                   margin: '15px',
                   height: '200px',
                   width: '250px' 
               >
               </div>
               <div>
                   <span style=cursor: 'pointer' onClick=this.handleAdd>+ </span>
                   <span style=cursor: 'pointer' onClick=this.handleSubtract>-</span>
               </div>
               <div>
                   <div>xthis.state.counter this.props.title for a sum of this.state.itemTotal</div>
               </div>
            </div>
        );
    


function mapDispatchToProps(dispatch) 
   return bindActionCreators( updateItemObject: updateItemObject , dispatch);


export default connect(null, mapDispatchToProps)(Product);

【问题讨论】：

显示Product组件的代码。

this 不是您认为的引用，因为 Lamba 的词法绑定

好的，我添加了产品组件的代码！

您不会在子组件中的任何地方使用 this.props.onClick - 您是否希望它会像在 div 上放置 onClick 一样工作？因为它不会。

【参考方案1】：

您将 onClick 作为道具从父组件传递给子组件，但在子组件中我没有看到您在子组件中的某些点击事件上调用 props.onClick。

【参考方案2】：

您没有在该组件内使用传递给product 组件的onClick 属性。因此它没有被解雇。您必须将事件处理程序分配给product 组件中的某个元素，这将触发作为道具传递给它的方法，如下所示

// Product.js component
render() 
        return (
            <div onClick=this.props.onClick style=margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'>
      ....

【讨论】：

非常感谢，我没有意识到我必须将函数传递给子组件