Блог

Я довольно новичок в реагировании, поэтому я почти уверен, что это что-то тривиальное, но я действительно изо всех сил пытаюсь это понять. У меня есть кнопка в качестве компонента внутри многоступенчатой формы. Тип кнопки по умолчанию — «отправить», поскольку она вложена в элемент формы. Я уже реализовал «onClick» для навигации по различным шагам (всего 5).

Теперь я хотел бы, чтобы тип кнопки был «кнопка» для шагов 1-4 и изменился на «отправить» на шаге 5.

Вот компонент кнопки:

 function Btn(props) {  return (  lt;button  type={props.type}  className={Styling[props.class]}  onClick={props.onClick}  disabled={props.disabled}  style={{ visibility: props.visibility, display: props.display }}  gt;  {props.text}  lt;/buttongt;  ); }  

И вот как это используется:

 function FindTransportationForm(props) {  const [step, setStep] = useState(1);   const [formData, setFormData] = useState({  pointOfLoading: '',  pointOfDelivery: '',  cargoWeightInKg: 0,  vegetables: 'unchecked',  });   const Titles = ['Itinerary', 'Cargo details', 'Capacity requirements', 'Additional information', 'Pick-up'];   const StepDisplay = () =gt; {  if (step == 1) {  return (  lt;Itinerary  pointOfLoading={formData.pointOfLoading}  pointOfDelivery={formData.pointOfDelivery}  formData={formData}  setFormData={setFormData}  /gt;  );  } else if (step == 2) {  return lt;CargoInformation /gt;;  }  };   return (  lt;form className={Styling['find-transportation-form']}gt;  lt;span className={Styling['steps']}gt;  Step {step} out of {Titles.length}  lt;/spangt;   lt;div className={Styling['title']}gt;  lt;h2gt;{Titles[step - 1]}lt;/h2gt;  lt;/divgt;  lt;div className={Styling['body']}gt;{StepDisplay()}lt;/divgt;  lt;div className={Styling['footer']}gt;  lt;div className={Styling['buttons-container']}gt;  lt;Btn  class={step === Titles.length ? 'btn-green' : 'btn-green'}  text={step === Titles.length ? 'find transportation' : 'next'}  type={step === Titles.length ? 'submit' : 'button'}  onClick={() =gt; {  setStep((currStep) =gt; currStep   1);  }}  display={step lt; Titles.length ? 'block' : 'block'}  /gt;  {/*   lt;Btn  class={ step === Titles.length ? "btn-green-submit": "btn-green"}  text={step === Titles.length ? "find transportation": "next"}  type="submit"  display={step === Titles.length ? "block": "none"}  /gt;    */}   lt;Btn  class="btn-text"  text="back"  type="button"  onClick={() =gt; {  setStep((currStep) =gt; currStep - 1);  }}  disabled={step == 1}  visibility={step === 1 ? 'hidden' : 'visible'}  /gt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  ); }  export default FindTransportationForm;  

Вы можете обновить тип кнопки по мере изменения шагов вашей формы 🙂

 lt;Btn  class={ step === Titles.length ? "btn-green": "btn-green"}  text={step === Titles.length ? "next": "next"}   onClick={() =gt; {  setStep((currStep) =gt; currStep   1);   }}  display={step lt; Titles.length ? "block": "block"}  type={step === 5 ? 'submit' : 'button'} // lt;------  /gt;