您的代码有两个问题，select的{​​{1}}指向onChange，它会更新状态以设置fontHandler的值：>

current

fontHandler：

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

无需提交。

以下代码有效。一些注意事项：

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

请注意，使用钩子和箭头功能。它们将使您的生活更轻松，代码更干净。

希望这可以帮助您理解为什么代码无法正常工作。是的。

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>
    );
  }
}