时间戳

首页 > 解决方案 > 动态下拉菜单样式选择器

javascript - 动态下拉菜单样式选择器

问题描述

import React, { Component } from "react";

export default class Fonts extends Component{

    constructor(props){
        super(props);
        this.state ={
            value: "",
            current: "",
        };
        this.fontHandler = this.fontHandler.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    fontHandler(event){
        this.setState({
            fontFamily: event.target.current,
            current: this.state.onChange
        });
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({ current: this.state.onSubmit });
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h1 style={{fontFamily: this.state.current }}>Yuh Yeet</h1>
                    <select onChange = {this.state.value}>
                        <option value="Anton">Anton</option>
                        <option value="Calistoga">Calistoga</option>
                        <option value="Fira Sans">Fira Sans</option>
                        <option value="Noto Serif">Noto Serif</option>
                        <option value="Quicksand">Quicksand</option>
                        <option value="Ubuntu">Ubuntu</option>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="Titillium Web">Titillium Web</option>
                    </select>
                    <button type="submit"> Change </button>
                </form>
            </div>
        )
    }
}

我正在尝试通过从我提供的下拉菜单中选择所需的字体来更改 h1 标签的内联样式。我的问题是我选择的字体没有被引入来改变我的风格。我正在将我所有的字体从 Google 字体导入到我的 index.html 中，所以这不是问题。我只是说国家错了还是什么？

标签： javascripthtmlcssinline

解决方案

您的代码有几个问题，select'onChange需要指出fontHandler更新状态以设置current值：

<select onChange={this.fontHandler}>
  // ...
</select>

字体处理程序：

fontHandler(value){
  this.setState({      
      current: value
  });
}

无需提交。

推荐阅读