【发布时间】: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