Заданное значение входного сигнала компонента управления с пустой строкой

Question

Я написал демо ниже для тестирования Reactcontrolled componentinput особенность. Но похоже, что есть ошибка.

class TestComponent extends React.Component{ 
 
    constructor() { 
 
    super(); 
 
    this.state = {value: 'beef'}; 
 
    this.handleValueChange = this.handleValueChange.bind(this); 
 
    } 
 
    
 
    handleValueChange(e) { 
 
    this.setState({value: e.target.value}); 
 
    } 
 
    render() { 
 
    return <div> 
 
     <div><input type='text' value={'hello world'} onChange={this.handleValueChange}/></div> 
 
     <div><input type='text' value={''} onChange={this.handleValueChange}/></div> 
 
     <div><input type='text' value={this.state.value} onChange={this.handleValueChange}/></div> 
 
     <div><input type='text' value={null} onChange={this.handleValueChange}/></div> 
 
     <div><input type='text' value={undefined} onChange={this.handleValueChange}/></div> 
 
     <hr/> 
 
     <div><input type='text' defaultValue={this.state.value} onChange={this.handleValueChange}/></div> 
 
     <p>{this.state.value}</p> 
 
    </div> 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <TestComponent />, 
 
    document.body 
 
)

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

Первый input с заданным строковое свойство значения. когда я что-то печатаю, вызовите функцию handleValueChange, и результат hello world + your type thing's first character.

Второй input с пустым значением стоимости строки. когда я что-то печатаю, он вызывает функцию handleValueChange, но, наконец, он всегда дает мне один символ.

Это странно.

обновлен! я добавить input с defaultValue, сравните с value={this.state.value}, моя голова запутались ..

Answer 1

Как уже упоминалось в комментариях ниже Ваш вопрос: удалить value={''} так как это будет пустым вводом каждый раз, когда он отображается.

Из react docs, правильный способ сделать это является

return <div> 
    <input type='text' value={this.state.value} onChange={this.handleValueChange}/> 
    <p>{this.state.value}</p> 
</div> 

Таким образом, всякий раз, когда вы печатаете что-то в поле ввода-зоне, вы будете обновлять значение, установленное в состоянии.

Если вы хотите, чтобы сделать компонент с значением, установленным в состоянии, вы можете использовать:

getInitialState() { 
    return { value: 'Your default value'} 
} 

Или, как уже было предложено использовать defaultValue.

Подробнее здесь: https://facebook.github.io/react/docs/forms.html

---

Update:

Согласно обновленной вопрос, я думаю, вы должны понимать, что установка значения во время визуализации функции на самом деле делает. Всякий раз, когда вы устанавливаете значение во время функции рендеринга, вы «блокируете» поле ввода как это конкретное значение. Значение пользовательского ввода не будет влиять на визуализированный элемент. Из документов: "User input will have no effect on the rendered element because React has declared the value".

Для решения этой проблемы вам необходимо установить значение, которое вы можете изменить динамически, в вашем случае будет value или this.state.value. Как вы сделали в вашем третьем примере:

<input type='text' value={this.state.value} onChange={this.handleValueChange}/> 

Таким образом Реагировать принимает значение, заданные с помощью ввода пользователя и затем обновляет значение компоненты в дальнейшем.

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

---

Update 2

Чтобы clearify части с controlled и uncontrolled компонентов немного:

controlled компонент представляет собой компонент, который имеет value свойство назначенного, и будет отражать значение от пользователя вход (value prop).

В то время как компонент uncontrolled не имеет назначенного свойства value и НЕ будет отражать значение от пользовательского ввода (поскольку он не предоставляет никаких value prop). Но если вы хотите создать экземпляр компонента uncontrolled со значением, вы должны использовать defaultValue.

В вашем случае (поскольку вы пытаетесь использовать компонент CONTROLLED) это означает, что вы НЕ должны использовать defaultValue и придерживаться правильной реализации компонента controlled. Это реализация с использованием value={this.state.value}.

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

Надеюсь, что это прояснит некоторые из вас проблемы! :)

Answer 2

использование defaultValue вместо value

render() { 
return <div> 
    <div><input type='text' defaultValue={'hello world'} onChange={this.handleValueChange}/></div> 
    <div><input type='text' defaultValue={''} onChange={this.handleValueChange}/></div> 
    <div><input type='text' defaultValue={this.state.value} onChange={this.handleValueChange}/></div> 
    <div><input type='text' defaultValue={null} onChange={this.handleValueChange}/></div> 
    <div><input type='text' defaultValue={undefined} onChange={this.handleValueChange}/></div> 
    <p>{this.state.value}</p> 
</div> 
} 
} 

Answer 3

Единственный правильный controlled component здесь:

<input type='text' value={this.state.value} onChange={this.handleValueChange}/>

Остальные не контролируемую. Однако, поскольку другие звонят setState и изменяют значение, они влияют на третий вход.

Смотрите, что происходит:

• Первый вход будет вызывать setState с e.target.value = hello world + first character you typed. Таким образом, это будет новое значение третьего входа
• Второй вход вызовет setState только с одним символом, так как значение этого входа всегда ''. Так один символ будет новое значение третьего входа
• Четвертый вход такой же, как второй один
• Последний вход, так как установлено значение undefined ... Это то же самое, как если бы вы не определили любое значение там, так что четвертый вход не будет контролироваться, но каждый раз, когда вы набираете это копирование его фактическое значение к третьему входу

Вывод:

• чтобы получить контролируемый вход, всегда устанавливается значение к чему-то, что вы контролируете, это изменение (состояние или реквизит).
• Будьте осторожны при изменении одной и той же части состояния с использованием разных входов ... Это становится очень сложно рассуждать.