React: An input which handler is on its parent should be considered as 'controlled' as well.

[alivedise]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?

class MyComponent extends React.Component {
  render() {
    return <div onInput={(e)=>this.onInput(e)}>
                 <input type="text" value={this.state.a} />
                 <input type="text" value={this.state.a}  />
                 <input type="text" value={this.state.a}  />
                 <input type="text" value={this.state.a}  />
               </div>
  }
}

Actually I am listening on every input's parent but not on input itself,
but before I know what's the so called 'controlled component', the behavior that I can't type anything in this case makes me confusing. No warning. After reading about the term, I do think it's "controlled" in my case. I just don't want to put handler 100 times if I have 100 inputs. What's the reason to treat it as uncontrolled in this case?

It should be up to developer how to control the input, instead of such a 'if-you-do-not-follow-the-new-term-we-invent-you-can-not-type-in-silent' way. If he/she really forgets to put a handler, then it's his/her fault. Put a handler on parent is not our fault. Don't want to be punished for that.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

See above

What is the expected behavior?
If there's a handler (no matter it's onInput or onChange or onKeydown) on the ancestor of the input element, it should be considered as controlled.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
15.4.2

[gaearon]

If there's a handler (no matter it's onInput or onChange or onKeydown) on the ancestor of the input element, it should be considered as controlled.

The input is considered controlled when it has a value prop. We don’t use the presence of event handlers for this. Think about this way: your render function is saying “this component has this value”. This is why it becomes controlled. This is described in detail in the “Forms” page in React documentation.

It should be up to developer how to control the input, instead of such a 'if-you-do-not-follow-the-new-term-we-invent-you-can-not-type-in-silent' way.

Indeed, and this is why it is not silent. If you run your code in JSFiddle (since you decided not to provide it, I put it there), you will see a warning in the console about this exact problem:

Do you have suggestions about how to improve this warning?

I just don't want to put handler 100 times if I have 100 inputs.

If you want the component to be uncontrolled, you can do it (it is also in the documentation).

But you don’t have to create a hundred methods for a hundred inputs, just like you don’t write a new function every time you need to pass a different argument. React is a JavaScript library so it assumes some familiarity with JavaScript idioms, e.g. functions, variables, and closures.

Here is an example with a single handler for three inputs:

https://jsfiddle.net/5yd28gxm/

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     name: 'Jane',
      surname: 'Smith',
      email: '[email protected]'
    };
  }

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

  renderInput(name) {
    return (
      <input
        type="text"
        onChange={e => this.handleChange(name, e)}
        value={this.state[name]}
      />
    );
  }

  render() {
    return (
      <div>
        {this.renderInput('name')}
        {this.renderInput('surname')}
        {this.renderInput('email')}
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);

I agree it’s not super obvious and we should add this example to the documentation.
There was an attempt in #8552 but it hasn’t been updated.
I’ll just use this example instead.

Thanks for raising this!

[gaearon]

I’ll keep the issue open as a documentation task.

[gaearon]

Updated docs via #8552.