Button
export const ButtonBlock = ({buttonType, value, handleSubmit}) => (
{value}
)
InputGroup
const InputGroup = props => {
//请注意下面的 ...others
const { iconLeft, iconRight, updateValue, ...others } = props
return (
className="input input-block"
onChange={event => updateValue(event.target.value.trim())}
/*...others 不明白的话翻一下 ES6 工具书*/
{...others}
/>
{iconRight ? : ''}
)
}
引入不同
import { ButtonBlock } from '...Button';
import InputGroup from '....InputGroup';
因为 Button 组件可能会弄好几个 button ,不确定
栗子🌰
class LoginForm extends React.Component {
constructor(props){
super(props);
this.state = {
userName : '',
}
this._handleLogin = this._handleLogin.bind(this)
}
_handleLogin() {
let userName = this.state.userName;
//点击提交按钮可以拿到输入框里的值
}
render() {
return (
iconLeft="phone"
updateValue={ userName => this.setState({userName}) }
type="tel"
pattern="[0-9]*"
placeholder="请输入手机号"
// type,pattern,placeholder 这些属性可以随意添加,因为 InputGroup里有{...other}
/>
buttonType="btn-dark"
value="立即登录"
handleSubmit={this._handleLogin}
/>
)
可以不用 this.state 吗?
可以!
updateValue={ userName => this.setState({userName}) }
反正输入框的值 userName 已经拿到,我猜可以这么写(未测试):
submit(value) {
console.log(value)
}
render() {
let value;
return (
this.submit(value)}>iconLeft="phone"
updateValue={ userName => value = userName }
type="tel"
pattern="[0-9]*"
placeholder="请输入手机号"
/>
)