React下拉菜单选Other时输入框不显示问题求助

你的问题出在混合使用React状态控制和直接DOM操作，导致样式控制冲突，同时初始渲染或状态更新时的逻辑不一致。以下是具体问题和修复步骤：

核心问题 #

1. DOM操作与React状态冲突：你在handleCuisineChange里用document.getElementById('other-cuisine-input').style.display直接修改DOM样式，但React的JSX已经通过style={{ display: selectedCuisine === 'Other' ? 'block' : 'none' }}用状态控制显示。当组件重新渲染时，React会覆盖你手动修改的DOM样式，导致输入框无法正常显示。
2. 潜在的DOM元素未挂载问题：如果在组件挂载完成前触发handleCuisineChange（比如初始渲染时的某些情况），document.getElementById会返回null，直接修改style会报错，导致后续逻辑失效。

修复步骤 #

1. 移除直接DOM操作的代码 #

删除handleCuisineChange里的以下两行代码：

document.getElementById('other-cuisine-input').style.display = 'block';
document.getElementById('other-cuisine-input').style.display = 'none';

完全依赖React状态selectedCuisine来控制输入框的显示，这是React的标准做法，避免DOM操作和状态的冲突。

2. 确保select组件的状态同步正确 #

当前select的value绑定了selectedCuisine，而formData.cuisine_id并没有和这个状态同步，虽然提交时会处理，但为了避免潜在问题，可以在handleCuisineChange里同步更新formData：

const handleCuisineChange = (e) => {
  const value = e.target.value;
  console.log("Selected cuisine:", value);
  setSelectedCuisine(value);
  // 同步更新formData里的cuisine_id
  setFormData(prev => ({ ...prev, cuisine_id: value }));
  if (value === 'Other') {
    setOtherCuisineName('');
  }
};

3. 可选：优化提交逻辑 #

提交时不要直接修改原formData对象，而是创建新的提交数据对象，避免修改状态引发的意外问题：

const submitData = { ...formData, cuisine_id: cuisineId };

修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function AddRecipe() {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    ingredients: '',
    directions: '',
    prep_time: '',
    total_servings: '',
    image: '',
    cuisine_id: '',
    user_id: '', 
  });

  const [cuisines, setCuisines] = useState([]);
  const [otherCuisineName, setOtherCuisineName] = useState('');
  const [selectedCuisine, setSelectedCuisine] = useState('');
  const [successMessage, setSuccessMessage] = useState('');

  useEffect(() => {
    fetchCuisines();
  }, []);

  const fetchCuisines = async () => {
    try {
      const response = await fetch('/api/cuisines');
      const data = await response.json();
      setCuisines(data);
    } catch (error) {
      console.error('Error fetching cuisines:', error);
    }
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleCuisineChange = (e) => {
    const value = e.target.value;
    console.log("Selected cuisine:", value);
    setSelectedCuisine(value);
    setFormData(prev => ({ ...prev, cuisine_id: value }));
    if (value === 'Other') {
      setOtherCuisineName('');
    }
  };

  const handleOtherCuisineNameChange = (e) => {
    setOtherCuisineName(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    let cuisineId;
    if (selectedCuisine === 'Other') {
      try {
        const response = await fetch('/api/cuisines', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ name: otherCuisineName }),
        });
        const data = await response.json();
        cuisineId = data.id;
      } catch (error) {
        console.error('Error creating new cuisine:', error);
      }
    } else {
      cuisineId = selectedCuisine;
    }
    // 创建新的提交数据对象，避免修改原状态
    const submitData = { ...formData, cuisine_id: cuisineId };
    try {
      const response = await fetch('/api/recipes', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(submitData),
      });
      const data = await response.json();
      console.log('Recipe created:', data);
      setSuccessMessage(`${submitData.name} added!`);
      // 重置所有表单状态
      setFormData({
        name: '',
        description: '',
        ingredients: '',
        directions: '',
        prep_time: '',
        total_servings: '',
        image: '',
        cuisine_id: '',
        user_id: '', 
      });
      setSelectedCuisine('');
      setOtherCuisineName('');
      navigate('/recipes')
    } catch (error) {
      console.error('Error creating recipe:', error);
    }
  };

  return (
    <div className="addrecipe">
      <h2>Add Recipe</h2>
      <form onSubmit={handleSubmit}>
        <div className="addrecipe-card">
          {successMessage && <p>{successMessage}</p>}
          <label>Name:</label>
          <input
            type="text"
            name="name"
            placeholder="recipe name"
            value={formData.name}
            onChange={handleInputChange}
            required
          />
          <div>
            <label>Description:</label>
            <textarea
              name="description"
              placeholder="brief recipe description"
              value={formData.description}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Ingredients:</label>
            <textarea
              name="ingredients"
              placeholder="recipe ingredients separated by commas"
              value={formData.ingredients}
              onChange={handleInputChange}
              required
            />
            <label>Directions:</label>
            <textarea
              name="directions"
              placeholder="recipe directions separated by periods."
              value={formData.directions}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Prep Time (minutes):</label>
            <input
              type="number"
              name="prep_time"
              placeholder="approximate prep time"
              value={formData.prep_time}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Total Servings:</label>
            <input
              type="number"
              name="total_servings"
              placeholder="total servings"
              value={formData.total_servings}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Image Link:</label>
            <input
              type="text"
              name="image"
              value={formData.image}
              onChange={handleInputChange}
            />
          </div>
          <div>
            <label>Cuisine:</label>
            <select
              name="cuisine_id"
              value={selectedCuisine}
              onChange={handleCuisineChange}
              required
            >
              <option value="">Select cuisine...</option>
              {cuisines.map(cuisine => (
                <option key={cuisine.id} value={cuisine.id}>{cuisine.name}</option>
              ))}
              {/* Prevents duplicating of cuisines */}
              {!cuisines.some(cuisine => cuisine.name === 'Other') && (
                <option value="Other">Other</option>
              )}
            </select>

            <input
              id="other-cuisine-input"
              type="text"
              placeholder="Enter custom cuisine name"
              value={otherCuisineName}
              onChange={handleOtherCuisineNameChange}
              style={{ display: selectedCuisine === 'Other' ? 'block' : 'none' }}
            />
          </div>
          <button className="button" type="submit">Add Recipe</button>
        </div>
      </form>
    </div>
  );
}

export default AddRecipe;

额外优化说明 #

• 提交成功后重置selectedCuisine和otherCuisineName状态，确保下次打开组件时状态干净。
• 使用函数式更新setFormData(prev => ({ ...prev, cuisine_id: value }))，避免依赖当前状态的快照引发的更新问题。

内容的提问来源于stack exchange，提问作者H.Kruz