react.jsでformに初期値を持たせたい。

Question

ES6+react.js(15.3.2)をbabelで変換して使っています。
親コンポーネントから、formを持つ子コンポーネントへ初期値をstateで渡したいのですがうまくいきません。propsで渡すとformを変更できなくなってしまいます。
なお、うまくいけばformの変更を親から利用しようと考えています。

class UMU extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: this.props.value};
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <form>
        <label>
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="0">なし</option>
            <option value="1">あり</option>
          </select>
        </label>        
      </form>
    );
  }
}

class Texts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    this.props.onEventCallBack({ value: event.target.value });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>コメント:
          <input type="text" value={this.state.text} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

const json = {
    "name":"tanaka",
    "umu":"1",
    "comment":"foo"
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state =  {data:[]};
  }

  pushMessage(comment){
    console.log(comment);
  }

  componentDidMount() {
      this.setState({data: json});
    }
  render(props) {
    return (
        <div>
            <div>name:{this.state.data.name}</div>
            <UMU value={this.state.data.umu} onEventCallBack={this.pushMessage}/>
            <Texts value={this.state.data.comment} onEventCallBack={this.pushMessage}/>
        </div>
      );
  }
}
ReactDOM.render(<Box/>, document.getElementById('app'));

Answer 1

子コンポーネントと親コンポーネントでフィールドの値を別々に持ってしまうと対処しづらいと思いますので、
初期値を親コンポーネントから送るのが良いかと思いました。

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        data: {
            umu: '',
            comment: '',
        },
    };
  }

 ：（省略）

  render(props) {
    return (
        <div>
            <Texts value={this.state.data.comment} onEventCallBack={this.pushMessage} />
        </div>
    );
  }
}

子コンポーネントはpropsの値のみを利用し、onEventCallBack()を利用して親stateを操作することで表示がロックされることも無いと思います。

class Texts extends React.Component {
  handleChange(event) {
    this.props.onEventCallBack({ value: event.target.value });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>コメント:
          <input type="text" value={this.props.value} onChange={event => this.handleChange(event)} />
        </label>
      </form>
    );
  }
}

即興でコードレビューできていませんが、役に立ちそうであればお試しください。

Comments

[immmmmmmm]

ありがとうございます。早速試してみます。