Question

我试图传递一个onClick值，但它传递的是未定义的。如果不是Card / Paper / Div，效果很好，但我需要此“按钮”作为Card / Paper / 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>
    );
  }

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

Answer 1

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

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

Answer 2

您需要将onClick()侦听器附加到<CardActionsArea/>组件中，该组件应嵌套在<Card/>组件中

类似

<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>

此外，我建议查看<CardActions/>文档，示例here显示其用法

Answer 3

您可以在卡片元素中尝试以下代码吗？

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

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

Answer 4

您需要用户arrow function： 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>

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

Answer 5

通过显式绑定handleChange或使用箭头函数语法来确保正确绑定this.handleChange = this.handleChange.bind(this) // In component's constructor // or handleChange = (value, input) => { this.setState({ [input]: value }); };：

onClick

<Card onClick={() => handleChange('villa', 'bostadstyp')}></Card>需要调用一个函数，因此您需要将处理程序包装为一个：

class Card():
   def __init__(self,cards):
       self._cards = cards

   def get_cards(self):
       return self._cards

   def get_card(self,slot):
       return self._cards[slot]

OnClick传递未定义

5 个答案: