Каковы различия между defaultValue и значением в select?

Question

У меня два реагирующих компонента, родительский и дочерний.Я передаю реквизит дочернему компоненту, и я хочу использовать этот реквизит для установки значения defaultValue на входе select.Однако, если это свойство изменится, я бы хотел, чтобы изменилось и значение выбора по умолчанию.

Когда я устанавливаю значение по умолчанию в select, я могу выбрать один из параметров, который является частью этогоселектор.Если вместо этого я использую значение, значение «default» изменяется при обновлении свойства, но я не могу выбрать ни один из параметров.

class Selector extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
       <select defaultValue={this.props.value}>
         <option>1</option>
         <option>2</option>
       </select>
    )
  }
}

Я бы хотел, чтобы значение изменилось, и я понимаю, чтоэто не рендеринг, хотя реквизит изменился.Я ищу работу вокруг.

Answer 1

defaultValue - выбранное значение при первой загрузке, а значение - выбранное значение каждый раз для изменения значения параметра

Answer 2

Если у вас нет обработчика onChange, вам нужно указать значение defaultValue, но в value, если у вас есть обработчик onChange.

Вы можете сделать это,

class Selector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: props.value
    }
  }
  change = (event) =>{
     this.setState({selected: event.target.value});
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.selected !== this.props.value) {
      this.setState({selected: this.props.value})
    }
  }
  render() {
    return (
       <select value={this.state.selected} onChange={this.change}>
         <option>1</option>
         <option>2</option>
       </select>
    )
  }
}

Answer 3

Я цитирую:

Разница между значением по умолчанию и значением свойства заключается в том, что defaultValue содержит значение по умолчанию, а значение содержит текущее значение после некоторых изменений. Если нет изменения, defaultValue и значение совпадают.

Свойство defaultValue полезно, если вы хотите выяснить, содержимое текстового поля было изменено.

На самом деле это означает, что если вы установите defaultValue , это значение будет инициализировано для ввода, и все, вы можете изменить значение, и текст изменится.

Но если вы поставите значение , вам нужно будет изменить это значение, данное на входе, в первую очередь, для изменения текста ввода.

Посмотрите на этот пример, все используют одно и то же состояние, но ведут себя по-разному.

// Example class component
class Thingy extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { value: 'test' }
  }
  
  onChange(e) {
    this.setState({ value: e.target.value });
  }
  
  render() {
    return (
      <div>
        <div><b>default value</b> (you can edit without changing this.state.value)</div>
        <input defaultValue={this.state.value}></input>
        
        <div><b>value</b> (you can't edit because it does not change this.state.value)</div>
        <input value={this.state.value}></input>

        <div><b>value</b> (you can edit because it has onChange method attached that changes this.state.value) <br /> <b>NOTE:</b> this will also change second input since it has attached the same state with <b>value</b> property, but won't change first input becase same state was attached as <b>defaultValue</b></div>
        <input value={this.state.value} onChange={e => this.onChange(e)}></input>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.body
);

div > div {
  font-size: 16px;
}

input + div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<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>