javascript - 尝试使用状态变量将字符串变为大写

Question

我不明白 react 中的这个 useState 是如何工作的。我只是想制作一个使用 .toUpperCase 更新标题的按钮，但它失败了。我不明白 >> const [Title, setTitle] = useState(title) << 这行应该是怎么回事。我尝试查看文档，但似乎无法掌握它。

import React, { useState } from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    
    
    const Unit = (props) =>{  
    
      return (
        <div>
          <p>Unit code = {props.unitcode}, Title = {props.title} </p>
    
        </div>
      )
    }
    
    const App = () => {
    
      const unitcode = ['COMP1010', 'COMP1750'] 
      const title = ['Fundamentals of Computer Science','Introduction to Business Information Systems'] 
      const  [Title, setTitle] = useState(title)
      
    
      return (
        <div>
             <Unit unitcode = {unitcode[0]} title = {title[0]} />
              <button onClick={() => setTitle(title.toUpperCase)}>
                    UP
              </button>       
             <Unit unitcode = {unitcode[1]} title = {title[1]} />
             
    
        </div>
        
      )
    }
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    )

标签： javascriptreactjs

Answer 1

除了使用括号toUpperCase()并在字符串而不是数组上调用它之外，这可能更接近您想要的：

const App = () => {
    const unitcode = ["COMP1010", "COMP1750"];
    const titles = [
        "Fundamentals of Computer Science",
        "Introduction to Business Information Systems"
    ];
    const [titleOne, setTitleOne] = useState(titles[0]);
    const [titleTwo, setTitleTwo] = useState(titles[1]);

    return (
        <div>
          <Unit unitcode={unitcode[0]} title={titleOne} />
          <button onClick={() => setTitleOne(titleOne.toUpperCase())}>UP</button>
          <Unit unitcode={unitcode[1]} title={titleTwo} />
        </div>
    );
};