reactjs - 有没有办法在本机反应中在文本输入中使用永久占位符？

Question

我希望“收件人”在文本框中，并在用户键入时留在那里。

标签： reactjsreact-native

Answer 1

一种解决方案是在输入值中显示额外的“To”，然后对结果字符串进行切片以避免将占位符放入结果中。

一个工作示例：

class MyInput extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			text: ''
		}
	}

	textChanged = event => {
		this.setState({ text: event.target.value.slice(5) })
	}

	render = () => <input type='text' value={'To : ' + this.state.text} onChange={this.textChanged}/>
}


ReactDOM.render(<MyInput />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>
<div id='root'>

Thsi 是 Web React 应用程序的答案，您可以将输入更改为TextBox