我正在尝试使用onClick以表单形式发送数据。以下是我的表格
import React from 'react';
const form = props => (
<form>
<input type = "text" name = "name" placeholder="name" />
<input type = "text" name = "lastname" placeholder="last name" />
<input type = "text" name = "id" placeholder="email address" />
<button onClick = {props.clickHandler}>Send</button>
</form>
);
export default form;
下面是我的App.js
import React, { Component } from 'react';
import './App.css';
import Form from './Components/Form';
class App extends Component {
clickHandler = async(e) =>{
e.preventDefault();
const name = e.target.value;
console.log(name + 'was typed');
}
render() {
return (
<div className="App">
<h1>I am a React App </h1>
<Form form = {this.Form}/>
</div>
);
}
}
export default App;
我不确定为什么这个值在控制台上不可见。任何帮助表示赞赏。
首先将您的组件命名为以大写字母开头。对于这种情况,您可以将值保留在主组件的状态中,然后通过传递给子组件的回调函数更新它们。
class App extends React.Component {
state = {
name: "",
lastName: "",
email: ""
};
clickHandler = e => {
e.preventDefault();
const { name, lastName, email } = this.state;
const data = `Data is: ${name}-${lastName}-${email}`;
alert(data);
};
changeHandler = e => {
e.preventDefault();
const { name, value } = e.target;
this.setState({
[name]: value
});
};
render() {
console.log(this.state);
const { clickHandler, changeHandler } = this;
return (
<div className="App">
<h1>I am a React App </h1>
<Form clickHandler={clickHandler} changeHandler={changeHandler} />
</div>
);
}
}
const Form = props => (
<form>
<input
onChange={props.changeHandler}
type="text"
name="name"
placeholder="name"
/>
<input
onChange={props.changeHandler}
type="text"
name="lastName"
placeholder="last name"
/>
<input
onChange={props.changeHandler}
type="text"
name="email"
placeholder="email address"
/>
<button onClick={props.clickHandler}>Send</button>
</form>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
对于输入,您需要一个onChange
处理程序,对于您的按钮,您需要一个onClick
处理程序,如您所想。您可以在控制台中看到更改状态。当您点击按钮时,它会使用您的状态值创建一个对象,然后触发警报。
你需要将clickHandler
作为支柱传递给你的Form
组件
render() {
return (
<div className="App">
<h1>I am a React App </h1>
<Form onSubmit={this.clickHandler} />
</div>
)
}
你正在使用React Uncontrolled form inputs所以你需要处理onSubmit
事件的形式
import React from "react"
const form = props => (
<form
onSubmit={e => {
e.preventDefault()
this.props.onSubmit(e)
}}
>
<input type="text" name="name" placeholder="name" />
<input type="text" name="lastname" placeholder="last name" />
<input type="text" name="id" placeholder="email address" />
<input type="submit" value="Send" />
</form>
)
export default form
在clickHandler
you现在可以从提交事件中检索所有值,如此
clickHandler = async e => {
e.preventDefault()
const name = e.target.elements[0]
console.log(name + "was typed")
}
编辑:添加了查看表单值的方法
import React, { Component } from 'react';
import './App.css';
import Form from './Components/Form';
class App extends Component {
clickHandler = (data) => {
console.log('data::', data );
}
render() {
return (
<div className="App">
<h1>I am a React App </h1>
<Form clickHandler = {this.clickHandler}/>
</div>
);
}
}
export default App;
import React, { PureComponent } from 'react';
export class Form extends PureComponent {
state = {
name: '',
lastname: '',
id: ''
}
onNameChange = (event) => {
this.setState({
name: event.target.value
})
}
onLastNameChange = (event) => {
this.setState({
lastname: event.target.value
})
}
onEmailChange = (event) => {
this.setState({
id: event.target.value
})
}
render() {
return (
<form>
<input type = "text" name = "name" placeholder="name" onChange={this.onNameChange} />
<input type = "text" name = "lastname" placeholder="last name" onChange={this.onLastNameChange} />
<input type = "text" name = "id" placeholder="email address" onChange={this.onEmailChange}/>
<button onClick = {props.clickHandler.bind(null, this.state)}>Send</button>
</form>
);
}
}