gpt4 book ai didi

javascript - 如何创建动态输入类型组件

转载 作者:行者123 更新时间:2023-11-30 11:12:05 24 4
gpt4 key购买 nike

我正在开发一个动态组件,其中输入可用于多种类型:textpasswordnumber date等。这个想法是使用这个输入,不管是什么类型和在哪里实现它,只要它是适应性的。我认为使用状态是个好主意,但我不知道该怎么做。有什么想法吗?

import React, { Component } from 'react';
import './styles.css';

export default class InputField extends Component {
constructor(props) {
super(props);

this.state = {
name: '',
password: false,
type: ''
}
}

render () {
return (
<div>
<label className='f-size'>{this.state.name}</label>
<input
className='input'
name={this.state.name}
placeholder={this.state.name}
value={this.props.value}
type={this.state.type}
onChange={this.props.onChange}
/>
<span className="errorMessage">{this.props.error}</span>
<span className="errorMessage">{this.props.missField}</span>

</div>

)
}
}

谢谢!

最佳答案

我个人认为你应该通过 Prop 来控制它,因为这个值只会对输入的父级有意义。

我用过这个

const InputField = ({
name,
placeholder,
value,
type,
onChange,
error,
missField
}) => (
<div>
<label className="f-size">{name}</label>
<input
className="input"
name={name}
placeholder={placeholder}
value={value}
type={type}
onChange={onChange}
/>
<span className="errorMessage">{error}</span>
<span className="errorMessage">{missField}</span>
</div>
);

父组件:

class App extends React.Component {
constructor(props) {
super(props);

this.handleChange = this.handleChange.bind(this);
}
state = {
value: '',
password: '',
};

handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
render() {
return (
<div className="App">
<InputField
value={this.state.value}
type="number"
name="value"
onChange={this.handleChange}
/>
<InputField
value={this.state.password}
type="password"
name="password"
onChange={this.handleChange}
/>
</div>
);
}
}

代码沙箱:https://codesandbox.io/s/y4ljv75k9

编辑为使用无状态组件。不确定您是否希望状态处理错误消息,但从您的示例来看,这是一个有效的解决方案。

关于javascript - 如何创建动态输入类型组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53281125/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com