При неправильной переменной все равно выводится результат

Question

Столкнулась с очень интересной штукой!

<div id='root'></div>
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
<script type='text/babel'>

    function Name({name, onNameChange}) {
        return <input value={name} onChange={onNameChange} />
        }

    function FavoriteAnimal({animal, onAnimalChange}) {
        return <input value={name} onChange={onAnimalChange}/>
    }

    function Display({name, animal}) {
        if(animal){
            return <p>Привет, {name}! Твое любимое животное — {animal}.</p>
        }else{
            return <p>Привет, {name}! Ты замечательный!</p>
        }
    }

    function App() {
        const [name, setName] = React.useState('')
        const [animal, setAnimal] = React.useState('')

        return(
            <div>
                <Name name={name} onNameChange={(e) => setName(e.target.value)}/>
                <FavoriteAnimal animal={animal} onAnimalChange={(e) => setAnimal(e.target.value)}/>
                <Display name={name} animal={animal} />
            </div>
        )
    }

    const rootElement = document.getElementById('root');
    const root = ReactDOM.createRoot(rootElement);
    root.render(<App />);
</script>

Почему при неправильном вводе переменной в

function FavoriteAnimal({animal, onAnimalChange}) {
            return <input **value={name}** onChange={onAnimalChange}/>
        }

У меня всё равно выводится резльутат на странице (одна буква в инпуте). Почему это так происходит и с чем cвязанно?

Answer 1

Почему это так происходит и с чем c

Элементарная невнимательность и копипаст... У тебя в FavoriteAnimal({animal, onAnimalChange}) принимается animal... А возвращается <input value={name} onChange={onAnimalChange}/> - value={name}.

Вот исправленный вариант.

<div id='root'></div>
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
<script type='text/babel'>

function Name({name, onNameChange}) {
  return <input value={name} onChange={onNameChange} />
}

function FavoriteAnimal({animal, onAnimalChange}) {
  return <input value={animal} onChange={onAnimalChange}/>
}

function Display({name, animal}) {
  if(animal){
    return <p>Привет, {name}! Твое любимое животное — {animal}.</p>
  }else{
    return <p>Привет, {name}! Ты замечательный!</p>
  }
}

function App() {
  const [name, setName] = React.useState('')
  const [animal, setAnimal] = React.useState('')
  const act1 = e => setName(e.target.value)
  const act2 = e => setAnimal(e.target.value)
  return(
    <div>
      <Name name={name} onNameChange={act1} />
      <FavoriteAnimal animal={animal} onAnimalChange={act2} />
      <Display name={name} animal={animal} />
    </div>
  )
}

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);
</script>

Answer 2

Проблема заключается в имени переменной.

Переменная name - это глобальная переменная, в которой хранится название окна.

Таким образов в качестве значения инпуту передается постоянное значение

БЛОГ НА HUSL

При неправильной переменной все равно выводится результат

Ответы (2 шт):