Question

如果不使用＆＃39; LinkedStateMixin＆＃39;我将如何重写以下代码？由于我正在升级到React 15.0并且不推荐使用此功能。

reactMixin(LoginView.prototype, React.addons.LinkedStateMixin);


<div className='form-group'>
  <input type='text'
    className='form-control input-lg'
    valueLink={this.linkState('email')}
    placeholder='Email' />
</div>
<div className='form-group'>
  <input type='password'
    className='form-control input-lg'
    valueLink={this.linkState('password')}
    placeholder='Password' />
</div>

以上代码是使用它的地方，我使用Redux来管理状态。

Answer 1

你可以自己管理这个州。你在使用babel / es6吗？

  class MyForm extends React.Component {
    state = {}

    emailChanged = (e) => {
      this.setState({ email: e.target.value });
    }

    passwordChanged = (e) => {
      this.setState({ password: e.target.value });
    }

    render() {
       const { email, password } = this.state;
       return (
         <form>
           <div className='form-group'>
             <input type='text'
               className='form-control input-lg'
               value={email}
               placeholder='Email'
               onChange={this.emailChanged} />
            </div>
            <div className='form-group'>
              <input type='password'
                className='form-control input-lg'
                value={password}
                placeholder='Password'
                onChange={this.passwordChanged} />
           </div> 
         </form>
       );
    }
 }

示例：http://www.webpackbin.com/EJjZTnu4Z

Answer 2

如果您查看Two-Way Binding Helpers doc page，就会有一个示例显示如何在不使用LinkedStateMixin的情况下执行相同操作。

在React 15.1.0上重写react-addons功能

2 个答案: