Компонент TextArea in Tabs в antd UI Toolkit и текст не отображается

Question

Я использую antd с Реагирует и имеет следующий код:

<Tabs  type="card">
  <TabPane tab="Summary" key="1">
    <TextArea name="Name" 
              rows={4} 
              style={{marginBottom: '10px'}} 
              defaultValue={"DefaultValue"}/>     
  </TabPane>
  <TabPane tab="Description" key="2">
    <TextArea name="Name" 
              rows={4} 
              style={{marginBottom: '10px'}}           
              defaultValue={"DefaultValue"}/>
  </TabPane>
</Tabs>

<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>

В реквизитах defaultValue я отрисовываю значения из реквизитов.Но только вторая текстовая область отображает значение, которое я посылаю из реквизита, а первая TextArea остается пустой.Если я устанавливаю значение вместо defaultValue, оно работает, но я не могу редактировать текст внутри него.В чем проблема?

Answer 1

Здесь две вещи - чтобы иметь возможность редактировать value, вам нужно реализовать обработчик onChange и обновить состояние компонента.Во-вторых, вы должны называть textAreas по-разному (в настоящее время они имеют одинаковое имя).

Per официальная документация :

В жизненном цикле рендеринга React атрибут value в элементах формы переопределяет значение в DOM.В случае неконтролируемого компонента вы часто хотите, чтобы React указывал начальный value, но оставлял последующие обновления неуправляемыми.Чтобы справиться с этим случаем, вы можете указать атрибут defaultValue вместо значения.

С учетом сказанного, то, что ваши управляемые Компоненты означают реализацию обработчика onChange и установку их state.

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

    this.state = {
      first: "First Default Value",
      second: "Second Default Value"
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    return (
      <div className="App">
        <Tabs type="card">
          <TabPane tab="Summary" key="1">
            <TextArea
              name="first"
              rows={4}
              style={{ marginBottom: "10px" }}
              value={this.state.first}
              onChange={this.onChange}
            />
          </TabPane>
          <TabPane tab="Description" key="2">
            <TextArea
              name="second"
              rows={4}
              style={{ marginBottom: "10px" }}
              value={this.state.second}
              onChange={this.onChange}
            />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

Живой пример

Answer 2

Похоже, вы не можете редактировать текст внутри него, потому что у вас нет обработчика onChange.

Вы можете прочитать о разнице между value и defaultValue здесь .