【问题标题】:How to get my button to trigger an element如何让我的按钮触发元素
【发布时间】:2019-08-14 19:48:10
【问题描述】:

我正在使用 nextjs 编译我的代码和 antd 框架。我无法设置按钮的定位样式,而且我希望我的 start 按钮触发一组按钮,但由于某种原因它不起作用。下面是我的代码

import React, { Component } from "react";
import Layout from "./Layout";
import { Radio } from "antd";

export default class PositiveAffirmation extends Component {
  state = {
    changeButton: false
  };

  toggleChangeButton = e => {
    this.setState({
      changeButton: e.target.value
    });
  };

  render() {
    const { changeButton } = this.state;
    return (
      <Layout>
        <Radio.Group
          defaultValue="false"
          buttonStyle="solid"
          onChange={this.changeButton}
          className="radio-buttons"
        >
          <Radio.Button value={true}>Start</Radio.Button>
          <Radio.Button value={false}>Stop</Radio.Button>
        </Radio.Group>
        {changeButton && (
          <Button.Group size={size}>
            <Button type="primary">Happy</Button>
            <Button type="primary">Sad</Button>
            <Button type="primary">Fullfiled</Button>
          </Button.Group>
        )}
        <style jsx>{`
          Radio.Button {
            font-size: 100px;
            margin-left: 20px;
            margin-top: 5px;
            margin-bottom: 5px;
            display: flex;
            justify-content: center;
          }
        `}</style>
      </Layout>
    );
  }
}

【问题讨论】:

  • 如果您在例如创建Minimal, Complete, and Verifiable example,那么有人帮助您会容易得多。 CodeSandbox.
  • 不要使用布尔值(true 和 false)尝试使用字符串,即“true”“false”或“start”“stop”在您的状态下使用默认的“false”或“stop”可能并在渲染使用 changeButton === "true" 或 "start" 您选择的任何一个。
  • 这是我的 sn-p codesandbox.io/s/n4rwrwyjlm。我需要有关如何实现样式的帮助。我正在使用 next.js 构建我的应用程序。
  • 你觉得你可以看看这个question

标签: html reactjs next.js


【解决方案1】:

你叫错了 fn 将onChange={this.changeButton} 更改为onChange={this.toggleChangeButton}

【讨论】:

  • 哦,我怎么错过了?谢谢。再次,我似乎无法设置我的按钮样式,我是 nextJs 的新手,有什么帮助吗? codesandbox.io/s/n4rwrwyjlm
  • - 我看到您使用的是antdantd 有它的 css 文件,我们必须将它导入到我们的根组件中以使用默认样式。 - 为了在下一个 js 中实现 css,你需要 @zeit/next-css 并且需要在 next.config.js 文件中进行更改。这是更改的代码codesandbox.io/s/5p3vxow7p
猜你喜欢
  • 2011-09-16
  • 2017-04-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-15
相关资源
最近更新 更多