如何引用在React类型记录中创建的元素并更改其CSS属性？

Question

我有一个窗体，当我单击某个按钮时，需要将它的css显示设置为阻止。当我单击Add按钮id="add“时，它应该为id="modalContent”div设置css样式块。我才刚开始反应，对此完全陌生。我读过一些关于裁判的文章，但我不能完全理解如何完成它。

AddFormMod.tsx

import React from 'react';
    import './App.css';
    
    
    function AddForm(){
        return (
            <div id="modalContent" className="modal-content">
                <h1 id="headerAdd">ADD NEW CONTACT</h1>
                <form action="#" id="myForm">
                    <label className="required label"  ><b>Name: </b></label><br />
                    <input className="form-fields type1" type="text" id="name" name="name" required></input><br/><br/>
                    <label className="required label"  ><b>Email:</b> </label><br/>
                    <input className="form-fields type1 " type="email" id="email" name="mail" required></input><br/><br/>
                    <label className="required label"  ><b>Mobile:</b> </label>
                    <label className="label" id="landlinelabel"  ><b>Landline:</b></label><br/>
                    <input className="form-fields" type="tel" id="mobile" name="mobile" pattern="^\d{10}$" required></input>
                    <input className="form-fields" type="tel" id="landline" name="landline" ></input><br/><br/>
                    <label className="label"  ><b>Website</b></label><br/>
                    <input className="form-fields type1" type="text" id="website" name="website" ></input><br/><br/>
                    <label className="label"><b>Address:</b> </label><br/>
                    <textarea className="addressstyle form-fields" id="address1" name="address1" rows={9} cols={74}></textarea>
                    <input className = "buttonstyle" type="submit" value="Add" id="adddetails" ></input>
                    <input className = "buttonstyle" type="button" value="Cancel" id="candetails"></input>
                </form> 
            </div>
            
        );
    }
    
    export default AddForm;

App.tsx

import React from 'react';
import './App.css';
import AddForm from './AddFormMod';



function App() {
  return (
    <p id="title"> Address Book </p>
  );
}

function AddHome(){
  return (
      <div>
          <button id="home" >HOME</button>
          <button id="add" onClick={} >+ADD</button>
      </div>
  );
}

function ContactBar(){

  return (
    <div>
      <p id="contacts">CONTACTS</p>
    </div>
  );
}

export { App , AddHome, ContactBar };

Answer 1

实现您想要的结果的一种方法是利用条件渲染。例如，当您在您的-button组件中单击“add”AddHome时，您可以设置一个状态变量来呈现AddForm-component：

function AddHome(){
  const [shouldRenderForm, setShouldRenderForm] = useState(false);
  return (
      <div>
          <button id="home" >HOME</button>
          <button id="add" onClick={() => setShouldRenderForm(true)} >+ADD</button>
          {shouldRenderForm && <AddForm />}
      </div>
  );
}

我还猜测您希望在提交后或通过AddForm-component中的关闭按钮“关闭表单”。要实现这一点，只需向组件传递一个支柱，AddForm-component就可以调用它来关闭表单：

// ... in the add AddHome component:
{shouldRenderForm && <AddForm closeForm={() => setShouldRenderForm(false)} />}

// ... in AddForm component:
type AddFormProps = { closeForm: () => void };
function AddForm({ closeForm }: AddFormProps) {
  // ... i.e. on a button to close the form
  <button type="button" onClick={() => closeForm()}>Cancel</button>
}

查看这个沙箱中的一个工作示例。