Javascript 基于功能组件的简单表单如何获取输入值

我是新手。从一月份开始一直在学习ReactJS。遇到一个关于基于函数的表单的问题，我无法获取用户键入的值。请帮忙。 这是个问题。。。 将向您提供一个表单模板。提交后，信息应与之前输入的所有信息一起显示在下面的列表中（按姓氏自动排序）

我做了一个“警报（{fname}）”，但是它没有显示用户输入的内容……请帮我一下。我只是一个初学者

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const style = {
  table: {
    borderCollapse: 'collapse'
  },
  tableCell: {
    border: '1px solid gray',
    margin: 0,
    padding: '5px 10px',
    width: 'max-content',
    minWidth: '150px'
  },
  form: {
    container: {
      padding: '20px',
      border: '1px solid #F0F8FF',
      borderRadius: '15px',
      width: 'max-content',
      marginBottom: '40px'
    },
    inputs: {
      marginBottom: '5px'
    },
    submitBtn: {
      marginTop: '10px',
      padding: '10px 15px',
      border:'none',
      backgroundColor: 'lightseagreen',
      fontSize: '14px',
      borderRadius: '5px'
    }
  }
}

function PhoneBookForm({ addEntryToPhoneBook }) {
    const [fname,setFname] = useState("");
    const [lname, setLname] = useState("");
    const [uphone, setUphone] = useState("");

  return (
    <form onSubmit={e => { 
        e.preventDefault();
        alert({fname});
        //alert(${fname});
        //console.log({fname});
        }}
        style={style.form.container}>
        
      <label>First name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userFirstname'
        name='userFirstname' 
        type='text'
        placeholder='Coder'
        onChange={e => setFname(e.target.value)}
        value={fname}
      />
      <br/>
      <label>Last name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userLastname'
        name='userLastname' 
        type='text' 
        placeholder='Byte'
        onChange={e => setLname(e.target.value)}
        value={lname}
      />
      <br />
      <label>Phone:</label>
      <br />
      <input
        style={style.form.inputs}
        className='userPhone' 
        name='userPhone' 
        type='text'
        placeholder='8885559999'
        onChange={e => setUphone(e.target.value)}
        value={uphone}
      />
      <br/>
      <input 
        style={style.form.submitBtn} 
        className='submitButton'
        type='submit' 
        value='Add User' 
      />
    </form>
  )
}

function InformationTable(props) {
  return (
    <table style={style.table} className='informationTable'>
      <thead> 
        <tr>
          <th style={style.tableCell}>First name</th>
          <th style={style.tableCell}>Last name</th>
          <th style={style.tableCell}>Phone</th>
        </tr>
      </thead> 
    </table>
  );
}

function App(props) {
  return (
    <section>
      <PhoneBookForm />
      <InformationTable />
    </section>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
        
export default App;

import React，{useState}来自“React”；
从“react dom”导入react dom；
常量样式={
表:{
边界塌陷：“塌陷”
},
表单元格：{
边框：“1px纯色灰色”，
保证金：0，
填充：“5px 10px”，
宽度：“最大内容”，
最小宽度：“150px”
},
表格：{
容器：{
填充：“20px”，
边框：“1px实心#F0F8FF”，
边界半径：“15px”，
宽度：“最大内容”，
marginBottom:'40px'
},
投入：{
marginBottom：“5px”
},
提交TN：{
marginTop:'10px'，
填充：“10px 15px”，
边界：'无'，
背景颜色：“浅绿色”，
fontSize:'14px'，
边界半径：“5px”
}
}
}
函数PhoneBookForm（{addEntryToPhoneBook}）{
const[fname，setFname]=useState（“”）；
const[lname，setLname]=useState（“”）；
const[uphone，setUphone]=useState（“”）；
返回(
{ 
e、 预防默认值（）；
警报（{fname}）；
//警报（${fname}）；
//log（{fname}）；
}}
style={style.form.container}>
名字：


setFname（e.target.value）}
值={fname}
/>


姓氏：


setLname（e.target.value）}
值={lname}
/>


电话：


setUphone（e.target.value）}
值={uphone}
/>


)
}
功能信息表（道具）{
返回(
名字
姓
电话
);
}
功能应用程序（道具）{
返回(
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);
导出默认应用程序；

谢谢，

试试这个

删除表单中提交的所有内容， 将它们取出并放入函数表达式中

像这样：

const handleUserInput = (event) => {
   event.preventDefault();
   alert(fname);
   alert(lname);
   alert(uphone);
}

onChange={(e) => setFname(e.target.value)}

将表格更改为：

<Form onSubmit={handleUserInput} style={style.form.container}>

---

祝你好运，你做的一切都很好，看起来只有一件事导致了问题

alert({fname})

应该是

alert(fname)

没有花括号。

---

如何使用花括号您可以在jsx（{fname}）上阅读更多详细信息=>

警报（fname）请求帮助时，请将问题简化为最小形式，更多信息：。另外，使用堆栈代码段（
[]
工具栏按钮）使示例可运行可以使人们更容易地帮助您。堆栈代码段支持React，包括JSX。还是不走运。我正在使用codesandbox.io。当我执行const[fname，setFname]=useState（“”）时；它说（0，_react.useState）不是函数。@Isaac共享codesandbox链接Hi Ridwan，谢谢，这是codesandbox链接：@Isaac您的代码正在工作，问题归结为您的依赖项react和react dom，我删除了它们并安装了版本“17.0.2”，您的代码立即工作。如果您在本地工作，请删除您的节点_模块，然后安装react和react dom v“17.0.2”-这样就可以了；我的代码沙盒：干杯！谢谢Ridwan，非常感谢，非常感谢。