我正在尝试实现redux表单。但是由于某些情况,它不会从键盘上获取任何输入。有人可以调查一下吗?
表单组件:
当我按下任何键时,对应的都不会反映出来。它看起来像一个无响应的文本区域。
import React from 'react';
import { Field, reduxForm } from 'redux-form';
let InputForm = props => {
const { handleSubmit } = props
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="InputData">Input Data</label>
<Field name="InputData" component='input' type="text" />
</div>
<button type="submit">Submit</button>
</form>
)
}
InputForm = reduxForm({
form: 'contact'
})(InputForm)
export default InputForm
主要组件:
import React from 'react';
import {connect} from 'react-redux';
import fetchTasks from '../actions/getTasks';
import InputForm from './inputfrom';
import showResults from './showResult';
class Homepage extends React.Component{
componentDidMount(){
this.props.fetchtsk();
}
render(){
return(
<div>
<h1>Welcome to My Task-Manager Page</h1>
<InputForm onSubmit={showResults} />
<h3>Here are the tasks:</h3>
<h4>Unchecked:</h4>
{this.props.root.map((item,index)=>{
if(item.isChecked===0)
return (<div><span key={index}>{item.data}</span><input type='checkbox' onClick={()=>this.props.changeCheck(item.insertionId)}></input></div>)
return null;
})}
<h4>Checked:</h4>
{this.props.root.map((item,index)=>{
if(item.isChecked===1)
return (<div><span key={index}>{item.data}</span><input type='checkbox' checked="checked" onClick={()=>this.props.changeCheckR(item.insertionId)}></input></div>)
return null;
})}
</div>
)
}
}
const matchStatetoProps = (state) =>{
return {root:state.root};
}
const dispatchStatetoProps = (dispatch) =>{
return{
fetchtsk:()=> dispatch(fetchTasks),
changeCheck: (insertionId)=> dispatch({type:'CHANGECHK',payload:insertionId}),
changeCheckR: (insertionId)=> dispatch({type:'CHANGECHKR',payload:insertionId})
}
}
export default connect(matchStatetoProps,dispatchStatetoProps)(Homepage);
如果可能的话,有人可以调查一下并告诉我我的错误吗?
这是showResult函数:
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
export default (async function showResults(values) {
await sleep(500); // simulate server latency
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
});