reactjs - react props 出错:props.onAnswer 不是函数
问题描述
我正在尝试制作一个表格,并且我正在将每种类型的问题分成组件,它成功呈现,但是当我尝试输入一些<Input>
内容时会出错
这是显示每个问题并回答问题的页面
import { Form, Button, Popconfirm, Icon, Input, Radio, Collapse, Checkbox } from 'antd';
import Axios from 'axios';
import CompanyContext from '../util/UserContext';
import InputOnly from '../components/InputOnly';
export default function Hitung() {
let [loading, setLoading] = useState(false);
let [form, setForm] = useState([]);
let [soal,setSoal] = useState([]);
let [pilihan, setPilihan] = useState([]);
let [test,setTest] = useState([1,2,3,4,5]);
let [answer, setAnswer] = useState("");
const company = useContext(CompanyContext);
useEffect( () => {
async function getData(){
try{
let data = await Axios.get('http://localhost:5000/lelang/getquestion');
setSoal(data.data.pertanyaan);
}
catch(e){
console.log(e);
}
}
getData();
},[]);
function onAnswer(data){
setLoading(false)
setAnswer(data)
}
const RenderButton = ()=>{
return(
<div style={{textAlign:"center"}}>
<button type="primary" onPress={(submit)}>
Simpan
</button>
</div>
)
}
const RenderQuestion = ()=>{
if (soal.length!=0){
return soal.map(data=>{
switch(data.type_question){
case "input_only":
return(<InputOnly data = {data} />)
}
})
}
else{
return(<h2 style={{textAlign:"center"}}>Loading....</h2>)
}
}
//insert_answer
async function submit(e) {
setLoading(true);
e.preventDefault();
try {
const token = await Axios.post('http://localhost:5000/lelang/insert_answer', company.data, );
}
catch (e) {
alert("error " + e)
}
setLoading(false);
}
return (
<div>
<h1 style={{ textAlign: 'center' }}>Input Penilaian {company.data}</h1>
<div style={{padding:'30px'}}>
<form>
<RenderQuestion />
<RenderButton/>
</form>
</div>
</div>
);
}
这是 InputOnly 的组件
import { Input, Form } from 'antd';
export default function InputOnly (props){
let[inputOnly,setInputOnly]=useState({});
let [temp,setTemp]=useState('');
useEffect(()=>{
setInputOnly(props.data);
},[]);
return (
<div>
<p style={{fontWeight:"bold"}}>{inputOnly.question}</p>
{/* <Form.Item required> */}
<input style={{ width: '20%' }}
onChange={data => props.onAnswer(data.target.value)}
// onBlur={()=>props.onAnswer(temp)}
>
</input>
<br/>
{/* </Form.Item> */}
</div>
)
}
我认为我的代码没有任何问题,但不知何故它仍然给我错误。请帮助我,我已经尝试解决这个问题 3 天了,谢谢
解决方案
也传递你的功能
return(<InputOnly data = {data} onAnswer={onAnswer}/>)
推荐阅读
- python - 从非连续视频帧创建全景图
- python - for 循环中的返回函数仅返回 1 项
- linux - 如何将目录及其子目录中的所有 PDF 文件复制到一个位置?
- macos - 在 Mac 上安装 ffmpeg 失败
- c++ - 我们如何在 C++ 中的无序映射中分配变量并更新它们?
- javascript - 为什么 JavaScript 没有检测到所有 cookie?
- java - 如何使用 Apache Tomcat 服务器在 VScode IDE 中设置 servlet 和 jsp 项目?
- javascript - 如何在方法单击时更新 sessionStorage 中的值?
- javascript - 如何在 String 对象的原型上实现这个测试?
- bash - bash脚本中的列表积累