Reactjs OnClick传递未定义

我试图传递onClick值，但它传递的是未定义的值。如果不是卡片/纸张/Div，效果很好，但我需要这个“按钮”成为卡片/纸张/Div

onClick={() => this.handleChange('bostadstyp')}
onClick={ value='villa', handleChange('bostadstyp')}

render() {
    const { bostadstyp } = this.props;
    const { auth } = this.props;
    const { value, values, handleChange, handleClick } = this.props;
    const { backgroundColori } = this.props;
    const backgroundColor2 = "#F09515";
    const aa = "";

    // const imageUrl = window.innerWidth >= "1600px" ? Banner1 : Banner2;

    //  {if (!auth.uid) return <Redirect to="/loggain" />;}

    return (
      <div>
        <img
          className="stars3"
          src={Logo}
          width="15%"
          align="center"
          marginBottom="10px"
        />
        <img src={Logo} width="15%" align="center" marginBottom="10px" />
        <div style={{ backgroundColor: "#F1F1F1", padding: "30px" }}>
          <h2
            style={{
              marginTop: "0px",
              marginLeft: "10%",
              color: "#F09515",
              fontFamily: "Avenir",
              fontWeight: "bold"
            }}
          >
            {" "}
            Dina Preferenser{" "}
          </h2>
        </div>
        <form
          className="background123"
          style={{
            backgroundColor: "#fdfdfd",
            marginTop: "0px",
            marginBottom: "0px"
          }}
        >
          <Card
            className="row xl12 l12 m12 s12"
            style={{
              marginLeft: "10%",
              marginRight: "10%",
              padding: "30px",
              backgroundColor: "#fdfdfd"
            }}
          >
            <br />
            <div className="col xl6 l6 m12 s12">
              <h4
                style={{
                  fontFamily: "Avenir",
                  fontWeight: "bold",
                  color: "#F09515"
                }}
              >
                1. Välj din boendestyp
              </h4>
              <p className="texti" style={{ fontSize: "16px" }}>
                Vi behöver den här uppgift då vissa avtal endast gäller för
                vissa anläggningstyper.
              </p>
            </div>
            <div className="col xl6 l6 m12 s12">
              <Card
                className="row cardi xl12 l12 m12 s12"
                style={{ width: "270%", backgroundColor: `white` }}
                value={"villa"}
                onClick={handleChange("bostadstyp")}
              >
                <div className=" col xl7 l7 m6 s6">
                  <img src={villa} width="50px" />
                </div>
                <div className="col xl5 l5 m5 s5">
                  <h6
                    className="texti"
                    style={{ fontSize: 16, textAlign: "right" }}
                  >
                    Villa/radhus
                  </h6>
                </div>
              </Card>
            </div>
          </Card>
        </form>
      </div>
    );
  }

onClick={（）=>this.handleChange（'bostadstyp'）}
onClick={value='villa'，handleChange（'bostadstyp'）}
render（）{
const{bostadstyp}=this.props；
const{auth}=this.props；
const{value，values，handleChange，handleClick}=this.props；
const{backgroundColori}=this.props；
const backgroundColor2=“#F09515”；
const aa=“”；
//const imageUrl=window.innerWidth>=“1600px”？横幅1:Banner2；
//{if（！auth.uid）return；}
返回(
{" "}
迪娜优先{“}


1.Välj din boendestyp

第六，我们将继续努力
vissa anläggningstyper。

拉德胡斯别墅
);
}

---

我希望'values.bostadstyp'获得值'villa'

，因为您在类中使用函数，所以必须使用this.handleChange而不是handleChange

<Card onClick={() => this.handleChange('bostadstyp' )}>
....
</Card>

this.handleChange（'bostadstyp'）}>
....

您需要将

onClick（）

侦听器附加到

组件，该组件应嵌套在

组件中

差不多

<Card className="row cardi xl12 l12 m12 s12" style={{ width: '270%', backgroundColor: `white` }} value={'villa'} onClick={handleChange('bostadstyp' )}  >



                                    <div className=" col xl7 l7 m6 s6">

                                        <img src={villa} width="50px" />
                                    </div>
                                    <div className="col xl5 l5 m5 s5">

                                        <h6 className="texti" style={{ fontSize: 16, textAlign: "right" }}>Villa/radhus</h6>
                                    </div>
                                </Card>

拉德胡斯别墅

---

此外，我建议查看

文档，该示例显示了如何使用它您可以在您的卡元素中尝试以下代码：

<Card className="row cardi xl12 l12 m12 s12" 
                style={{ width: '270%', backgroundColor: `white` }} value={'villa'}
                onClick={(e) => {
                  e.preventDefault();
                  this.handleChange('bostadstyp');
                }}>

{
e、 预防默认值（）；
这个.handleChange（'bostadstyp'）；
}}>

问题可能是由于以下原因之一： 1.handleChange（）未与此绑定。 2.要从onClick处理程序传递值，应该使用（e）=>func（'value'）） 3.单击发生在表单元素内部，最好包含event.preventDefault（）

您需要用户：

onClick={（）=>{this.handleChange（'bostadstyp'）}}

<Card className="row cardi xl12 l12 m12 s12" style={{ width: '270%', backgroundColor: `white` }} value={'villa'} onClick={() => { this.handleChange('bostadstyp' ) }}  >
    <div className=" col xl7 l7 m6 s6">
        <img src={villa} width="50px" />
    </div>
    <div className="col xl5 l5 m5 s5">
        <h6 className="texti" style={{ fontSize: 16, textAlign: "right" }}>Villa/radhus</h6>
    </div>
</Card>

{this.handleChange（'bostadstyp'）}>
拉德胡斯别墅

更新 处理来自父组件的更改：

通过显式绑定或使用箭头函数语法，确保您的

handleChange

已正确绑定：

onClick

需要调用一个函数，因此需要将处理程序包装成一个：

handleChange（'villa'，'bostadstyp'）}>

已尝试，但不起作用。它返回错误：×TypeError:this.handleChange不是函数。（在“this.handleChange（'bostadstyp'）”中，“this.handleChange”未定义）。handleChange是在父组件中定义的，它在父组件上具有相同的方法。我调整onClick={{this.props.handlechange.不起作用。它停止运行clickable@OblicionA将

{{

替换为=>

{

如果您之前定义了要传递的值，您的解决方案就可以工作。我需要它来传递方法上的卡的值，但随后我遇到了如下问题：×TypeError:this.handleChange不是函数。（在“this.handleChange（'bostadstyp'）”中，“this.handleChange”未定义）。这实际上很奇怪，因为它可以与单选按钮或任何其他类型的输入一起工作。就像您的方法一样，仅卡片和div会给出此错误，但随后我遇到了如下问题：×TypeError:this.handleChange不是一个函数。（在'this.handleChange（'bostadstyp'）中，'this.handleChange'未定义）。当然，您需要定义handleChange（param）。其次，您希望更新从props传递的“values.bostadstyp”。React建议不要直接设置props值。您应该定义一个名为“values”的状态变量并在其中设置值。所有辅助变量（在本例中为“values”）都在“state”中定义正如react建议的那样！

onClick={（e）=>{e.preventDefault（）；let values={…this.state.values}；values[“bostadstyp”]=“villa”；this.setState（{values}；}}}}

这将起作用，您也可以将setState代码移动到handle方法中。以前尝试过。卡不再“可点击”不知道为什么

onClick={value='villa'，handleChange（'bostadstyp'）}

语法不正确。@Oblicion A在父级中定义了

handleChange

函数吗？@AmolBJamkarcomponent@OblicionA你能在问题中添加

handleChange

code吗？@AmolBJamkar handleChange=input=>e=>{this.setState（{[input]：e.target.value}）；}；handleChange由handleChange=input=>e=>{this.setState（{[input]：e.target.value}）；}；尝试您的解决方案后，卡不再可单击（无任何情况发生），它必须是

handleChange=（e，input）=>{this.setState（{[input]：e.target.value}）；}；

而不包装额外的函数。然后

onClick={（e）=>handleChange（e，'bostadstyp'）}

。更新了答案。它给了我错误类型错误：undefined不是对象（评估'e.target.value'）对，这不是输入元素，因此代码无法工作。您需要直接传递值。更新了答案。非常抱歉让您感到厌烦。现在我得到了无限循环错误：“×超出了最大更新深度。当组件在内部重复调用setState时，可能会发生这种情况

this.handleChange = this.handleChange.bind(this) // In component's constructor

// or

handleChange = (value, input) => {
  this.setState({
    [input]: value
  });
}; 

<Card onClick={() => handleChange('villa', 'bostadstyp')}></Card>