我正在創建一個簡單的 React 應用程式，但我偶然發現了一些我無法解決的問題。我創建了一個按鈕組件，我已經像任何其他組件一樣匯出了它。目前，我在主要部分中匯入了 Button 組件，因為我需要兩個按鈕
問題是標簽不會呈現所以我有2個普通按鈕..
按鈕應顯示的標簽是 Search
有什么修復嗎？
按鈕組件
import React from 'react';
import './Button.css';
const Button = ({state = "active"}) => {
return (
<button className={`.btn--${state}`}></button>
);
};
export default Button;
我的主要組件
import React from 'react';
import './Input.css';
import { useState } from 'react';
import Button from '../Button/Button';
const Input = () => {
const [value, setValue] = useState("");
const SearchButton = (e) => {
e.preventDefault();
console.log("click");
};
const ResetButton = (e) => {
e.preventDefault();
setValue("");
};
return (
<main>
<form className='inputfield'>
<h2 className='input-text'>Zoek een Github user</h2>
<div className='input'>
<input className='search' type='text' placeholder='Typ hier een gebruikersnaam...' value={value} onChange={(e) => setValue(e.target.value)}></input>
<div className='button-field'>
<Button state="inactive" className='search-now' onClick={SearchButton}>Search</Button>
<Button className='reset' onClick={ResetButton}></Button>
</div>
</div>
</form>
</main>
);
};
export default Input;
uj5u.com熱心網友回復：
你有兩種直接的方式來做你想做的事。
第一個解決方案是在此處使用子 React Docs
您的按鈕將如下所示：
const Button = ({state = "active"}) => {
const {children} = props
return (
<button className={`.btn--${state}`}>{children}</button>
);
};
第二種方法是通過 props 將 Value 傳遞給組件。
<Button
state="inactive"
className='search-now'
onClick={SearchButton}
textValue={"Search"} />
// Button
const Button = ({state = "active"}) => {
const {textValue} = props
return (
<button className={`.btn--${state}`}>{textValue}</button>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444597.html