语法错误:意外的标记'<' in React

问题描述 投票:0回答:1

 function SubmitButton(){ return ( <button>Submit</button> ); }

这里是新手,尝试为用户创建一个下拉列表以选择年份并点击“提交”。我不明白为什么在 return 语句之后总是出现语法错误。

这是到目前为止我的其余代码。

import React, { onChange } from 'react';

function SubmitButton(){
  return (
    <button>Submit</button>
  );
}

const dropdownYear = () => {
  const arr = [];

  const start = new Date().getFullYear() - 100;
  const current = new Date().getFullYear();

  for (let i = current; i >= start; i--){
    arr.push(<option value={i}>{i}</option>)
  }
}

function BirthdayField(){
  <select 
    className='bd-form'
    name='year'
    onChange={onChange}
    value={year}
  >
    <option value='0'>Year</option>
    {dropdownYear()}
  </select>
}


export default function MyApp(){
  return (
    <div>
      <BirthdayField />
      <SubmitButton />
    </div>
  );
}
javascript reactjs dropdown
1个回答
0
投票

BirthdayField 中缺少返回类型, 您提供的代码片段还有其他问题,值没有在任何地方定义,您需要传递回调函数而不是来自react的onChange

function BirthdayField() { 
  return (
    <select className='bd-form' name='year' onChange={()=>{}} value={year}>
      <option value='0'>Year</option>
      {dropdownYear()}
    </select>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

© www.soinside.com 2019 - 2024. All rights reserved.