Reactのページでvalue属性を設定する方法は何ですか？

2年 ago
陽, 向宇
1 minute

Reactのページでは、value属性を次のように設定することができます：

  1. state内の値にvalue属性とonChangeイベントハンドラ関数をバインドすることで、制御された入力ボックスを実現できます。render関数では、stateの値をvalue属性として入力ボックスに渡します。
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
}
  1. stateとの結びつきが不要な場合は、defaultValue属性を使用して、入力ボックスのデフォルト値を設定できます。render関数内で、defaultValue属性にデフォルト値を渡して入力ボックスを設定します。
class MyComponent extends React.Component {
  render() {
    return (
      <input
        type="text"
        defaultValue="默认值"
      />
    );
  }
}

受制御コンポーネントを使用してvalue属性を設定する場合は、onChangeイベントハンドラ内でstateの値を更新する必要があります。一方、defaultValue属性を使用すると、ユーザーの入力に応じて値が変化することはありません。defaultValueの値を手動で変更しない限り、入力ボックスの値は変わりません。

bannerAds