Necesito crear un formulario que muestre algo basado en el valor de retorno de una API. Estoy trabajando con el siguiente código:
class App extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); //error here event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> // error here </label> <input type="submit" value="Submit" /> </form> ); } }Recibo el siguiente error:
error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.Recibí este error en las dos líneas que comenté en el código. Este código ni siquiera es mío, lo obtuve del sitio oficial de React ( https://reactjs.org/docs/forms.html ), pero no funciona aquí.
Estoy usando la herramienta create-react-app.
El Component se define así:
interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { } Lo que significa que el tipo predeterminado para el estado (y accesorios) es: {} .
Si desea que su componente tenga value en el estado, debe definirlo así:
class App extends React.Component<{}, { value: string }> { ... }O:
type MyProps = { ... }; type MyState = { value: string }; class App extends React.Component<MyProps, MyState> { ... }interface MyProps { ... } interface MyState { value: string } class App extends React.Component<MyProps, MyState> { ... } // Or with hooks, something like const App = ({}: MyProps) => { const [value, setValue] = useState<string>(''); ... }; Los type también están bien, como en la respuesta de @nitzan-tomer, siempre que seas coherente.
Si no desea pasar el estado de la interfaz o el modelo de accesorios, puede probar esto
class App extends React.Component <any, any>