Я новичок в React, и я разрабатываю форму отправки с несколькими полями в React. Он имеет несколько полей ввода Textfield и функцию ввода тегов. Пользователь вводит свою информацию в поля, и в конце информация должна отображаться на странице подтверждения. Теперь отображаются все мои данные, кроме тегов (из ввода тегов). В чем проблема?
Форма (дополнительная информация. js)
export const TagsInput = props => {
const [Tags, setTags] = React.useState(props.Tags)
const removeTags = indexToRemove => {
setTags([...Tags.filter((_, index) => index !== indexToRemove)])
}
const addTags = event => {
if (event.target.value !== '') {
setTags([...Tags, event.target.value])
props.selectedTags([...Tags, event.target.value])
event.target.value = ''
}
}
return (
<div className='tags-input'>
<ul id='tags'>
{Tags.map((Tag, index) => (
<li key={index} className='tag'>
<span className='tag-title'>{Tag}</span>
<span
className='tag-close-icon'
onClick={() => removeTags(index)}
>
x
</span>
</li>
))}
</ul>
<input
type='text'
onKeyUp={event => event.key === 'Enter' ? addTags(event) : null}
placeholder='Press enter to add tags'
/>
</div>
)
}
export class AdditionalInfo extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
render() {
const {values, handleChange} = this.props
const selectedTags = Tags => {
console.log(Tags)
}
return (
<Container className='ContainerA'>
<Row>
<Col className='ACol'>
<br />
<br />
<div>
<TagsInput selectedTags={selectedTags} Tags={['Nodejs', 'MongoDB']} onChange={handleChange('Tags')}
defaultValue={values.Tags} />
</div>
<Row>
<Col xs='6' sm='4'>
<TextField
placeholder="Country"
label="Country"
onChange={handleChange('Country')}
defaultValue={values.Country}
margin="normal"
fullWidth="true"
id="outlined-basic"
variant="outlined"
required
/>
....
<div className='buttons-container' style={{position:'relative',bottom:'20px'}}>
<button onClick={this.back} className='previous'>قبلی</button>
<button form='my-form' type='submit' onClick={this.continue} className='next'>ادامه</button>
</div>
Основной держатель формы
//AdditionalInfo.js is used here
class CreateJob extends Component {
state = {
step:1,
Title:'',
requirements:'',
Country:'',
Region:'',
Zipcode:'',
Benefits:'',
Company:'',
InternalCode:'',
Details:'',
Tags:[],
Address:'',
Department:'',
Salary:''
}
nextStep =() => {
const {step} = this.state
this.setState({
step: step + 1
})
}
prevStep =() => {
const {step} = this.state
this.setState({
step: step - 1
})
}
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
render () {
const { step } = this.state
const {Title,Benefits,Company,InternalCode,Detailss,Tags,Address,Department,Salary,requirements,Country,Region,Zipcode } = this.state;
const values ={Title,Benefits,Company,InternalCode,Detailss,Tags,Address,Department,Salary,requirements,Country,Region,Zipcode}
return (
<div>
........
{(()=>{
switch (step) {
case 1:
return(
<AdditionalInfo
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
)
.........
И это подтверждение Страница
//it uses the main form holder component info too
export class Confirmation extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
render () {
const {
values: {
Title, Benefits,
Company, InternalCode, Detailss, Department,Tags, Salary,requirements,Zipcode,
Country,Region
}
} = this.props
return (
....
<div className='content'>
<Container>
<Row>
<Col xs='6' sm='4' className='TextContent'>
<Row className='TextInside'> {Salary} : حقوق پیشنهادی</Row>
<Row> زیپ کد : {Zipcode}</Row>
<Row> کشور : {Country} </Row>
..
</Col>
<Col xs='6' sm='4' className='TextContent'>
...
<Row> تگ ها : {Tags}</Row>
Извините за длинный код, но я не понимаю, почему информация {Страна} (например) показано на этой странице подтверждения, но мои теги из TagsInput {Tags} не отображаются (даже если они правильно зарегистрированы в консоли) Где моя ошибка?