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

Question

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 Fonts 导入到我的 index.html 中，所以这不是问题所在。我只是在称状态错误还是什么？

Answer 1

下面的代码有效。一些注意事项:

• Taki 是对的，您不需要 onSubmit 处理程序。但是，如果您不使用字体，则字体会在选择后立即更改，而不是在单击“更改”按钮时更改。作为 Taki 解决方案中的第二个注意事项， fontHandler 函数不会在设置状态方面为您提供所需的结果。如果使用该函数，则必须将状态设置为 current: value.target.value
• 使用 setState() 时, 两个音符。 1 - 您不想引用当前状态。你想使用 prevState。状态更新有时会一起批处理，这意味着有时会出现错误。 2 - 您不想引用 eventHandler 有两个原因。首先是它不知道你在引用什么。 onChange和 onSubmit不是组件中定义的函数，它们是 <form> 的属性和 select分别。其次，您真的不应该尝试在状态中引用函数。在状态对象之外创建函数并调用它来设置要更改的状态
• 我将初始状态设置为第一个选择选项。不会影响应用的功能，但如果默认字体未设置为 Anton，用户体验会更好。

作为旁注，研究使用 Hooks 和 Arrow 函数。它们会让您的生活更轻松，代码更简洁。

希望这能帮助您理解为什么您的代码无法正常工作。再见。

export default class Fonts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFont: "Anton",
      displayedFont: "Anton"
    };
    this.fontHandler = this.fontHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  fontHandler(event) {
    const font = event.target.value;

    this.setState({
      selectedFont: font
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    this.setState(prevState => ({
      displayedFont: prevState.selectedFont
    }));
  }

  render() {
    return (
      <div>
        {console.log(this.state)}
        <form onSubmit={this.handleSubmit}>
          <h1 style={{ fontFamily: this.state.displayedFont }}>Yuh Yeet</h1>
          <select onChange={this.fontHandler}>
            <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>
    );
  }
}