reactjs - 当切换 div 时输入值保持不变的原因

Question

class App extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			inputvalue : '',
      allval: '',
      bool: false
		}
	}
  
  onChangeOfInput =(name,value) =>{
  	this.setState({
			[name]: value
		});
  }
  
  clickHandler = () =>{
  	console.log(this.state);
      this.setState({
       	bool: !this.state.bool
      });
  }

	render() {
		return (
			<div className="hello">
       {this.state.bool 
       ? <div>1:<Input placeholder="Title 1" name="Title1" onChangeOfInput={this.onChangeOfInput} />
			  	2:<Input placeholder="Title 2" name="Title2"  onChangeOfInput={this.onChangeOfInput} /> </div>
        :
        <div>
				3:<Input placeholder="Title 3" name="Title3"  onChangeOfInput={this.onChangeOfInput}/>
				4:<Input placeholder="Title 4" name="Title4"  onChangeOfInput={this.onChangeOfInput}/>
        </div>
        }
        
  			<button onClick={this.clickHandler}>Change</button>
			</div>
      
		)
	}
}

class Input extends React.Component  { 
	constructor(props) {
		super(props)
		this.state = {
			inputvalue: ''
		}
	}

	handleChange(e) {
  
		this.setState({
			inputvalue: e.target.value
		});
    this.props.onChangeOfInput(this.props.name,e.target.value)
	}

	render() {
		return (
			<input 
				type="text" 
				placeholder={this.props.placeholder} 
				value={this.state.inputvalue} 
				onChange={this.handleChange.bind(this)}
				/>
		)
	}
}

ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

<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>
<div id="app"></div>

当我输入一些值时，我DIVs通过单击Change按钮来切换。输入值保留在该字段上。如何确保输入值字段只显示自己的值？谢谢

标签： reactjs

Answer 1

而不是在子组件中使用状态，即Input组件。您可以在父组件中添加状态，即App每个输入字段的组件。

constructor(props) {
    super(props)
    this.state = {
      inputvalue : '',
      allval: '',
      bool: false,
      Title1: '',
      Title2: '',
      Title3: '',
      Title4: ''
    }
}

App之后，您可以通过将valueprops 传递给组件来将每个输入字段值映射到组件的特定状态Input。

IE<Input placeholder="Title 1" name="Title1" value={this.state.Title1} onChangeOfInput={this.onChangeOfInput} />

所以你可以通过在每个组件中添加value道具来更新渲染方法Input

 render() {
        return (
            <div className="hello">
       {this.state.bool 
       ? <div>1:<Input placeholder="Title 1" name="Title1" value={this.state.Title1} onChangeOfInput={this.onChangeOfInput} />
                2:<Input placeholder="Title 2" name="Title2"  value={this.state.Title2} onChangeOfInput={this.onChangeOfInput} /> </div>
        :
        <div>
                3:<Input placeholder="Title 3" name="Title3" value={this.state.Title3} onChangeOfInput={this.onChangeOfInput}/>
                4:<Input placeholder="Title 4" name="Title4" value={this.state.Title4} onChangeOfInput={this.onChangeOfInput}/>
        </div>
        }

            <button onClick={this.clickHandler}>Change</button>
            </div>

        )
    }

最后你可以使用组件中的value道具Input

<input 
     type="text" 
     placeholder={this.props.placeholder} 
     value={this.props.value} 
     onChange={this.handleChange.bind(this)}
/>

所以更新你的Input组件

 class Input extends React.Component  {

        handleChange(e) {
        this.props.onChangeOfInput(this.props.name,e.target.value)
        }

        render() {
            return (
                <input 
                    type="text" 
                    placeholder={this.props.placeholder} 
                    value={this.props.value} 
                    onChange={this.handleChange.bind(this)}
                    />
            )
        }
    }

通过这种方式，您可以确保输入值字段仅显示其自己的值