아래 코드는 내 앱의 구성 요소 폴더에있는 NewFighterForm.js 파일에서 가져온 것입니다.
import React from 'react';
import { updateNewFighterForm } from '../actions/newFighterForm.js';
import { connect } from 'react-redux';
import Button from 'react-bootstrap/esm/Button';
const NewFighterForm = ({ formData, updateNewFighterForm, handleSubmit, editMode }) => {
const {name, alias, nationality, division, stance, height, reach, status, champion, win, loss, draw, ko} = formData
const handleChange = event => {
const { name, value } = event.target
debugger
updateNewFighterForm(name, value)
}
return (
<div>
<h1>Add Fighter</h1>
<form onSubmit={event => {
event.preventDefault()
debugger
handleSubmit(formData)
}}>
<ol>
<ul>
<label>Add Name: </label>
<br></br>
<input
placeholder="Enter Name"
name="name"
onChange={handleChange}
value={name}
/>
</ul>
<label>Add Alias: </label>
<br></br>
<ul>
<input
placeholder="Enter Alias"
name="alias"
onChange={handleChange}
value={alias}
/>
</ul>
<label>Add Nationality: </label>
<br></br>
<ul>
<input
placeholder="Enter Nationality"
name="nationality"
onChange={handleChange}
value={nationality}
/>
</ul>
<label>Choose Division: </label>
<br></br>
<select name="division"
value={"" + division}
onChange={handleChange}>
<option disabled>Choose the following weight division</option>
<option value="Flyweight">Flyweight</option>
<option value="Bantamweight">Bantamweight</option>
<option value="Featherweight">Featherweight</option>
<option value="Lightweight">Lightweight</option>
<option value="Welterweight">Welterweight</option>
<option value="Middleweight">Middleweight</option>
<option value="Light Heavyweight">Light Heavyweight</option>
<option value="Cruiserweight">Cruiserweight</option>
<option value="Heavyweight">Heavyweight</option>
</select>
<br></br>
<label>Choose Fighter's Stance: </label>
<br></br>
<select name="stance"
value={"" + stance}
onChange={handleChange}>
<option disabled>Choose the following stance type</option>
<option value="Orthodox">Orthodox</option>
<option value="Southpaw">Southpaw</option>
</select>
<br></br>
<label>Add Height: </label>
<br></br>
<input
placeholder="Enter Height (i.e 5 ft 5 in)"
name="height"
onChange={handleChange}
value={height}
/>
<br></br>
<label>Add Reach: </label>
<br></br>
<input
placeholder="Enter Reach (i.e 68 in)"
name="reach"
onChange={handleChange}
value={reach}
/>
<br></br>
<label>Are they still fighting?</label>
<br></br>
<select name="status"
value={"" + status}
onChange={handleChange}>
<option disabled>Choose whether fighter is still competing</option>
<option value="inactive">inactive</option>
<option value="active">active</option>
</select>
<br></br>
<label>Check if they ever were a World Champion</label>
<input
type="checkbox"
name="champion"
defaultChecked={false}
value={champion}
/>
<br></br>
<label>W:</label>
<input
placeholder="Enter number of wins"
name="win"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={win}
/>
<br></br>
<label>L:</label>
<input
placeholder="Enter number of losses"
name="loss"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={loss}
/>
<br></br>
<label>D:</label>
<input
placeholder="Enter number of draws"
name="draw"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={draw}
/>
<br></br>
<label>KO:</label>
<input
placeholder="Enter number of KO"
name="ko"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={ko}
/>
<br></br>
<label>List for Fighter: </label>
<br></br>
<select name="lists"
onChange={handleChange}>
<option disabled>Choose List for Fighter</option>
</select>
<br></br>
<Button
type="submit"
value={ editMode ? "Update Fighter" : "Create Fighter" }
>Create Fighter</Button>
</ol>
</form>
</div>
)
}
const mapStateToProps = state => {
// debugger
return {
formData: state.newFighterForm,
lists: state.myLists
}
};
export default connect(mapStateToProps, { updateNewFighterForm })(NewFighterForm)
내 양식의 하단은 사용자가 전투기를 추가 할 목록 중 하나를 선택할 수 있도록 드롭 다운 선택을 입력하려는 곳입니다. mapStateToProps 내에 배치 된 디버거 에서 " list : state.myLists "에 정의 된 목록 배열을 볼 수 있습니다. 배열을 올바르게 매핑하고 사용자가 목록을 선택할 수있는 선택 옵션을 표시하고 싶습니다. NewFighterForm에 대해 정의 된 파괴 된 속성 중 하나로 " list " 를 추가해야한다고 가정합니다 (내 이해가 올바른지 알려주십시오). 더 자세한 정보가 필요한 경우 알려 주시면 그에 따라 게시물을 업데이트하겠습니다. 대단히 감사합니다!
예, lists소품 객체에서 lists구조를 분해하고 배열 이라고 가정하면 일반 JSX로 매핑됩니다. 여기서는 표시 lists할 value및 label속성 이있는 요소 개체가 배열에 포함되어 있다고 가정하고 실제 lists 배열 요소 모양에 맞게 조정해야합니다 .
const NewFighterForm = ({
formData,
updateNewFighterForm,
handleSubmit,
editMode,
lists, // <-- get lists from props
}) => {
...
return (
<div>
<h1>Add Fighter</h1>
<form
onSubmit={event => {
event.preventDefault()
debugger
handleSubmit(formData)
}}
>
<ol>
...
<label>List for Fighter: </label>
<br></br>
<select
name="lists"
onChange={handleChange}
>
<option disabled>Choose List for Fighter</option>
{lists.map(listItem => ( // <-- map the list
<option value={listItem.value}> // <-- the option value
{listItem.label} // <-- what you want displayed
</option>
))}
</select>
...
</ol>
</form>
</div>
)
};
const mapStateToProps = state => {
// debugger
return {
formData: state.newFighterForm,
lists: state.myLists
}
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다