Comment faire pour qu'un nombre devienne éditable onClick dans React ?

Question

J'ai un numéro qui, lorsqu'on clique dessus, doit devenir modifiable. J'ai regardé les entrées de formulaire et d'autres bibliothèques React, mais aucune d'entre elles ne correspond à ce que je recherche. Les captures d'écran ci-dessous sont des maquettes.

Pour que l'interface utilisateur reste cohérente, je me contente d'ajouter une bordure autour du numéro lorsque le bouton d'édition est cliqué (le code ci-dessous est simplifié pour démontrer la fonctionnalité).

constructor() {
    this.state = {
        editModeEnabled: false
    }
}

handleEditClick() {
    this.setState({
        editModeEnabled: !this.state.editModeEnabled
    })
}

render() {
    let numberBox = null
    if (this.state.editModeEnabled) {
        numberBox = {
            border: '1px solid blue',
        }
    }

    <span style={dollarStyle}>$</span>
    <div style={numberBox}>
        {this.props.number}
    </div>

    <button onClick={this.handleEditClick.bind(this)}></button>
}

Je me demande s'il existe un moyen de rendre le nombre modifiable dans une sorte de champ de saisie sans modifier l'apparence du nombre. J'ai essayé d'envelopper le nombre dans un fichier <input> mais il est très difficile de styliser une balise d'entrée.

Answer 1

Vous pouvez utiliser <div contenteditable="true">

Cependant, la méthode la plus correcte dans ce cas est probablement de trouver les bonnes propriétés de style pour votre entrée puisque contenteditable a des propriétés HTML qui ne vous intéressent probablement pas.

Answer 2

Il suffit de styliser le <input> . Il existe d'autres moyens de résoudre ce problème, mais aucun n'est aussi simple que l'utilisation de CSS dans le but prévu. L'exemple ci-dessous n'est qu'un exemple, et vous devrez sûrement l'adapter un peu à votre conception et à votre ou vos plates-formes cibles, mais vous ne rencontrerez pas le même genre de problèmes si vous essayez de trouver une solution non CSS.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editModeEnabled: false,
    }
  }

  handleEditClick() {
    this.setState({ editModeEnabled: !this.state.editModeEnabled });
  }

  render() {
    return (
      <form>
        $<input type="number" value={this.props.number} disabled={!this.state.editModeEnabled}/>
        <a role="button" title="Edit" onClick={this.handleEditClick.bind(this)}>✏️</a>
      </form>
    );
  }
}

ReactDOM.render(<App number={5}/>, document.getElementById('container'));

input {
  border: 1px solid blue;
  display: inline-block;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  width: 2em;
  line-height: inherit;
  vertical-align: inherit;
  text-align: right;
  color: inherit;
  font: inherit;
  background: none;
}

input[disabled] {
  border: 0;
}

a { cursor: pointer; text-decoration: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>