如何更改按钮名称？（Javascript）

Question

（这篇文章是用谷歌翻译写的。）

这是 App.js。

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter />
      <Counter />
      <Counter />
    </div>
  );
}
export default App;

这是 Counter.js

import React, {useState} from 'react'

const Counter = () => {
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
      <button onClick={increment}>
        Click {count}
        </button>
  );
}

export default Counter;

这是一个镀铬屏幕。 按下按钮时，每个数字都加 1。

但这不是最重要的。

我希望将第一个按钮命名为“单击 a”。 我想将第二个按钮命名为“单击 b”。 我想将第三个按钮命名为“单击 c”。

我今天第一次学习反应，所以我还是很糟糕。 如果你能告诉我怎么做，我将不胜感激。

Answer 1

如果您想设置 a,b,c 或任何其他名称到您的按钮名称，请使用道具将您想要的值传递给您的按钮

import React, {useState} from 'react'

const Counter = (props) => {
    const { buttonTitle } = props;
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
     <>
      <h2>{count}</h2>
      <button onClick={increment}>
        Click {buttonTitle}
        </button>
     </>
  );
}
export default Counter;

和

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter buttonTitle="a" />
      <Counter buttonTitle="b" />
      <Counter buttonTitle="c" />
    </div>
  );
}
export default App;

Answer 2

在您的Counter组件中，您可以接受来自App Component 的道具

import React, {useState} from 'react'

const Counter = (props) => {
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
      <button onClick={increment}>
        Click {props.name}
        </button>
  );
}

export default Counter;

从您的App组件中，您可以将 name prop 传递给Counter组件

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter name="a" />
      <Counter name="b" />
      <Counter name="c" />
    </div>
  );
}
export default App;

Answer 3

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter name='a'/>
      <Counter name='b'/>
      <Counter name='c'/>
    </div>
  );
}
export default App;

//counter.js
import React, {useState} from 'react'

const Counter = (props) => {
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
      <button onClick={increment}>
        Click {props.name}
        </button>
<p>{count}<p/>
  );
}

export default Counter;

Answer 4

我认为你应该尝试这样Click {String.fromCharCode(count+97)}

String.fromCharCode(number) 它将数字转换为字符 & +97，因为 ASCII 中的小字母从 97 开始，以供参考检查 ASCII 表。 我希望你想要这个答案。