在React中按ID访问DOM元素

Question

I want to handle disable attribute of input elements by ID in my React app

It's possible with states but number of elements is not fixed, maybe 10 input or 20 or more ...

I've decided to set ID for each input and access to them with ID, for example :

 document.getElementById('title-12') .... 

So, is it a suitable trick or best practice to handle this issue ?

Performance and clean code is very important for me :-)

Thanks

Answer 1

Oops... my bad. I digged into your discussion and here's a new solution.

That's still correct that React approach is advised so we should use reusable components for inputs (we can have any number of inputs right now). All the input's data are stored in parent component's store as a collection. We map through collection and send properties to each component (in the simplest version - id , isDisabled and disableInput() function).

class Titles extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titles: [
        {
          id: 0,
          disabled: true
        },
        {
          id: 1,
          disabled: false
        }
      ]
    };
  }

  addNewInput = () => {
    const prevList = this.state.titles;
    const newItem = {
      id: prevList.length,
      disabled: false
    };
    this.setState({ titles: [...prevList, newItem] });
  };

  disableInput = id => {
    const titles = this.state.titles;
    titles[id].disabled = !titles[id].disabled;
    this.setState({ titles });
  };

  render() {
    return (
      <div>
        <h1>Titles list</h1>
        <form style={{ display: "flex", flexDirection: "column" }}>
          {this.state.titles.map(title => (
            <Title
              key={title.id}
              id={title.id}
              isDisabled={title.disabled}
              disableInput={id => this.disableInput(id)}
            />
          ))}
        </form>
        <button onClick={() => this.addNewInput()}>Dodaj nowy</button>
      </div>
    );
  }
}

in Title component we just render the props in to <input> and a button with onClick function that sends id of this component to its parent, where disable attribute's value is being reversed.

const Title = ({ id, isDisabled, disableInput }) => {
  return (
    <div>
      <input
        id={id}
        type="text"
        placeholder={id}
        disabled={isDisabled}
      />
      <button type="button" onClick={() => disableInput(id)}>
        disable input
      </button>
    </div>
  );
};

Working example can be found here.

Please let me know if it works for you.